菜单动画css_创建一个CSS3动画菜单

最新推荐文章于 2024-07-04 10:00:00 发布

cuken7684698822

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量318

点赞数

文章标签： html css css3 less nagios

原文链接：https://www.script-tutorials.com/creating-css3-animated-menu/

版权

菜单动画css

CSS3 animated menu tutorial. This is our eighth CSS3 menu. Today we will make interesting animated menu using CSS3. This menu will have 2 levels. By default – we can see single small top menu element. When we will hover our mouse over this element – first level elements will appear, when we will hover mouse over these elements – will appear submenus. So, lets start !

CSS3动画菜单教程。这是我们的第八个CSS3菜单。今天，我们将使用CSS3制作有趣的动画菜单。此菜单将分为2级。默认情况下–我们可以看到单个小的顶部菜单元素。当我们将鼠标悬停在该元素上时–将出现第一级元素；当我们将鼠标悬停在这些元素上时–将出现子菜单。所以，让我们开始吧！

This is our final result (how menu will looks):

这是我们的最终结果(菜单的外观)：

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download our package and lets start creating this menu!

好的，下载我们的软件包，开始创建此菜单！

步骤1. HTML (Step 1. HTML)

Here are html source code of our menu.

这是我们菜单的html源代码。

index.html (index.html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <title>CSS3 animated menu #8 | Script tutorials</title>
</head>
<body>
<div class="example">
    <!-- defining top menu elements -->
    <ul class="navi">
        <li id="n1"><a href="#"><img src="images/btn.png" alt="" /><span>Menu1</span></a>
            <!-- defining sub menu elements -->
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu11</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu12</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu13</span></a></li>
            </ul>
        </li>
        <li id="n2"><a href="#"><img src="images/btn.png" alt="" /><span>Menu2</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu21</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu22</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu23</span></a></li>
            </ul>
        </li>
        <li id="n3"><a href="#"><img src="images/btn.png" alt="" /><span>Menu3</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
            </ul>
        </li>
        <li id="n4"><a href="#"><img src="images/btn.png" alt="" /><span>Menu4</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
            </ul>
        </li>
        <li id="n5"><a href="https://www.script-tutorials.com/creating-css3-animated-menu/"><img src="images/btn.png" alt="" /><span>Tutorial</span></a>
        </li>
    </ul>
    <div style="clear:both"></div>
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <title>CSS3 animated menu #8 | Script tutorials</title>
</head>
<body>
<div class="example">
    <!-- defining top menu elements -->
    <ul class="navi">
        <li id="n1"><a href="#"><img src="images/btn.png" alt="" /><span>Menu1</span></a>
            <!-- defining sub menu elements -->
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu11</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu12</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu13</span></a></li>
            </ul>
        </li>
        <li id="n2"><a href="#"><img src="images/btn.png" alt="" /><span>Menu2</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu21</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu22</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu23</span></a></li>
            </ul>
        </li>
        <li id="n3"><a href="#"><img src="images/btn.png" alt="" /><span>Menu3</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
            </ul>
        </li>
        <li id="n4"><a href="#"><img src="images/btn.png" alt="" /><span>Menu4</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
            </ul>
        </li>
        <li id="n5"><a href="https://www.script-tutorials.com/creating-css3-animated-menu/"><img src="images/btn.png" alt="" /><span>Tutorial</span></a>
        </li>
    </ul>
    <div style="clear:both"></div>
</div>
</body>
</html>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #8 styles.

这是使用CSS样式。前两个选择器(您可以跳过它)属于我们的演示页面。所有其余的–菜单＃8样式。

css / style.css (css/style.css)


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
.example {
    position:relative;
    background:url("../images/background.jpg") no-repeat scroll center center #fff;
    width:600px;
    height:510px;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* navigation menu styles - main styles */
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:absolute;
    left:5px;
    font-size:11px;
    font-weight:bold;
    color:#fff;
}
/* top line - hover styles */
ul.navi:hover {
    height:100px;
}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(70px);
    -ms-transform: translatex(70px);
    -o-transform: translatex(70px);
    -webkit-transform: translatex(70px);
    transform: translatex(70px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(140px);
    -ms-transform: translatex(140px);
    -o-transform: translatex(140px);
    -webkit-transform: translatex(140px);
    transform: translatex(140px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(210px);
    -ms-transform: translatex(210px);
    -o-transform: translatex(210px);
    -webkit-transform: translatex(210px);
    transform: translatex(210px);
}
ul.navi:hover li#n5 {
    -moz-transform: translatex(280px);
    -ms-transform: translatex(280px);
    -o-transform: translatex(280px);
    -webkit-transform: translatex(280px);
    transform: translatex(280px);
}
/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}
/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;
    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(60px);
    -ms-transform: translatex(-70px) translatey(60px);
    -o-transform: translatex(-70px) translatey(60px);
    -webkit-transform: translatex(-70px) translatey(60px);
    transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
    -moz-transform: translatey(60px);
    -ms-transform: translatey(60px);
    -o-transform: translatey(60px);
    -webkit-transform: translatey(60px);
    transform: translatey(60px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(70px) translatey(60px);
    -ms-transform: translatex(70px) translatey(60px);
    -o-transform: translatex(70px) translatey(60px);
    -webkit-transform: translatex(70px) translatey(60px);
    transform: translatex(70px) translatey(60px);
}


/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
.example {
    position:relative;
    background:url("../images/background.jpg") no-repeat scroll center center #fff;
    width:600px;
    height:510px;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* navigation menu styles - main styles */
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:absolute;
    left:5px;
    font-size:11px;
    font-weight:bold;
    color:#fff;
}
/* top line - hover styles */
ul.navi:hover {
    height:100px;
}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(70px);
    -ms-transform: translatex(70px);
    -o-transform: translatex(70px);
    -webkit-transform: translatex(70px);
    transform: translatex(70px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(140px);
    -ms-transform: translatex(140px);
    -o-transform: translatex(140px);
    -webkit-transform: translatex(140px);
    transform: translatex(140px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(210px);
    -ms-transform: translatex(210px);
    -o-transform: translatex(210px);
    -webkit-transform: translatex(210px);
    transform: translatex(210px);
}
ul.navi:hover li#n5 {
    -moz-transform: translatex(280px);
    -ms-transform: translatex(280px);
    -o-transform: translatex(280px);
    -webkit-transform: translatex(280px);
    transform: translatex(280px);
}
/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;
    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}
/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;
    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(60px);
    -ms-transform: translatex(-70px) translatey(60px);
    -o-transform: translatex(-70px) translatey(60px);
    -webkit-transform: translatex(-70px) translatey(60px);
    transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
    -moz-transform: translatey(60px);
    -ms-transform: translatey(60px);
    -o-transform: translatey(60px);
    -webkit-transform: translatey(60px);
    transform: translatey(60px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(70px) translatey(60px);
    -ms-transform: translatex(70px) translatey(60px);
    -o-transform: translatex(70px) translatey(60px);
    -webkit-transform: translatex(70px) translatey(60px);
    transform: translatex(70px) translatey(60px);
}

步骤3.图片 (Step 3. Images)

Few images – background of our demo and button icon:

少量图片-我们的演示和按钮图标的背景：

现场演示

结论 (Conclusion)

Today we made new unique menu. Your comments and thanks are very welcomed. Good luck!

今天，我们做了新的独特菜单。非常欢迎您提出意见和感谢。祝好运！

翻译自: https://www.script-tutorials.com/creating-css3-animated-menu/

菜单动画css

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单动画css_创建一个CSS3动画菜单

菜单动画cssCSS3 animated menu tutorial. This is our eighth CSS3 menu. Today we will make interesting animated menu using CSS3. This menu will have 2 levels. By default – we can see single small top menu e...
复制链接

扫一扫