Creating A CSS3 Animated Menu

Creating A CSS3 Animated Menu

6 32750
Creating CSS3 animated menu #8

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 !


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

CSS3 animated menu8

Here are samples and downloadable package:

Live Demo

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


Step 1. HTML

Here are html source code of our menu.

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>

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/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);
}

Step 3. Images

Few images – background of our demo and button icon:

page background
button

Live Demo

Conclusion

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

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 50
jQuery Mobile Lesson 5

0 75

6 COMMENTS

    • Hi aryan,

      Errors? Which errors? JS? :-)
      Keep attention, that these nice transition effects work only in the most modern browsers (not IE)

    • Hi Wisegg,
      By default, there are three subelements for every top level elements. All of them have own class (l, c, r). L means – Left, this subelement goes to left when we hoper it’s parent element. C means Center, R means Right.
      If you want to add more than 4 submenu elements, you will need to customize styles for all placements of these elements.

Leave a Reply