Home » Tutorials

Creating A CSS3 Animated Menu

Tutorials
Author Reading 12 min Views 670 Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/style.css
  5. Step 3. Images
  6. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

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

Step 1. HTML

Here are html source code of our menu.

index.html

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04     <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
05     <title>CSS3 animated menu #8 | Script tutorials</title>
06 </head>
07 <body>
08 <div class="example">
09     <!-- defining top menu elements -->
10     <ul class="navi">
11         <li id="n1"><a href="#"><img src="images/btn.png" alt="" /><span>Menu1</span></a>
12             <!-- defining sub menu elements -->
13             <ul class="sub">
14                 <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu11</span></a></li>
15                 <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu12</span></a></li>
16                 <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu13</span></a></li>
17             </ul>
18         </li>
19         <li id="n2"><a href="#"><img src="images/btn.png" alt="" /><span>Menu2</span></a>
20             <ul class="sub">
21                 <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu21</span></a></li>
22                 <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu22</span></a></li>
23                 <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu23</span></a></li>
24             </ul>
25         </li>
26         <li id="n3"><a href="#"><img src="images/btn.png" alt="" /><span>Menu3</span></a>
27             <ul class="sub">
28                 <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
29                 <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
30                 <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu31</span></a></li>
31             </ul>
32         </li>
33         <li id="n4"><a href="#"><img src="images/btn.png" alt="" /><span>Menu4</span></a>
34             <ul class="sub">
35                 <li class="l"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
36                 <li class="c"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
37                 <li class="r"><a href="#"><img src="images/btn.png" alt="" /><span>Menu41</span></a></li>
38             </ul>
39         </li>
40         <li id="n5"><a href="https://www.script-tutorials.com/creating-css3-animated-menu/"><img src="images/btn.png" alt="" /><span>Tutorial</span></a>
41         </li>
42     </ul>
43     <div style="clear:both"></div>
44 </div>
45 </body>
46 </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

001 /* demo page styles */
002 body {
003     background:#eee;
004     margin:0;
005     padding:0;
006     font-family: Helvetica,Arial,sans-serif;
007     font-size: 11px;
008 }
009 .example {
010     position:relative;
011     background:url("../images/background.jpg") no-repeat scroll center center #fff;
012     width:600px;
013     height:510px;
014     border:1px #000 solid;
015     margin:20px auto;
016     padding:20px;
017     border-radius:3px;
018     -moz-border-radius:3px;
019     -webkit-border-radius:3px;
020 }
021 /* navigation menu styles - main styles */
022 ul.navi {
023     position:relative;
024     z-index:100;
025     padding:0;
026     margin:0 0 0 60px;
027     list-style:none;
028     width:auto;
029     height:30px;
030 }
031 ul.navi > li {
032     width:48px;
033     height:30px;
034     position:absolute;
035     left:0;
036     top:0;
037     -moz-transition: -moz-transform 0.5s ease-in-out;
038     -ms-transition: -ms-transform 0.5s ease-in-out;
039     -o-transition: -o-transform 0.5s ease-in-out;
040     -webkit-transition: -webkit-transform 0.5s ease-in-out;
041     transition: transform 0.5s ease-in-out;
042 }
043 ul.navi a {
044     display:block;
045     width:48px;
046     height:30px;
047     position:absolute;
048     left:0;
049     top:0;
050     line-height:30px;
051     text-align:center;
052     text-decoration:none;
053 }
054 ul.navi a img {
055     border:0;
056 }
057 ul.navi a span {
058     position:absolute;
059     left:5px;
060     font-size:11px;
061     font-weight:bold;
062     color:#fff;
063 }
064 /* top line - hover styles */
065 ul.navi:hover {
066     height:100px;
067 }
068 ul.navi:hover li#n1 {
069     -moz-transform: translatex(0px);
070     -ms-transform: translatex(0px);
071     -o-transform: translatex(0px);
072     -webkit-transform: translatex(0px);
073     transform: translatex(0px);
074 }
075 ul.navi:hover li#n2 {
076     -moz-transform: translatex(70px);
077     -ms-transform: translatex(70px);
078     -o-transform: translatex(70px);
079     -webkit-transform: translatex(70px);
080     transform: translatex(70px);
081 }
082 ul.navi:hover li#n3 {
083     -moz-transform: translatex(140px);
084     -ms-transform: translatex(140px);
085     -o-transform: translatex(140px);
086     -webkit-transform: translatex(140px);
087     transform: translatex(140px);
088 }
089 ul.navi:hover li#n4 {
090     -moz-transform: translatex(210px);
091     -ms-transform: translatex(210px);
092     -o-transform: translatex(210px);
093     -webkit-transform: translatex(210px);
094     transform: translatex(210px);
095 }
096 ul.navi:hover li#n5 {
097     -moz-transform: translatex(280px);
098     -ms-transform: translatex(280px);
099     -o-transform: translatex(280px);
100     -webkit-transform: translatex(280px);
101     transform: translatex(280px);
102 }
103 /* submenus - common styles */
104 ul.sub {
105     padding:0;
106     margin:0;
107     list-style:none;
108     width:48px;
109     height:30px;
110     position:absolute;
111     left:0;
112     top:0;
113     z-index:-1;
114     opacity:0;
115     -moz-transition: opacity 0s linear 1s;
116     -ms-transition: opacity 0s linear 1s;
117     -o-transition: opacity 0s linear 1s;
118     -webkit-transition: opacity 0s linear 1s;
119     transition: opacity 0s linear 1s;
120 }
121 ul.sub li {
122     width:48px;
123     height:30px;
124     position:absolute;
125     left:0;
126     top:0;
127     z-index:-1;
128     -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
129     -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
130     -o-transition: -o-transform 0.5s ease-in-out 0.5s;
131     -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
132     transition: transform 0.5s ease-in-out 0.5s;
133 }
134 /* submenus - hover styles */
135 ul.navi > li:hover ul {
136     opacity:1;
137     -moz-transition: opacity 0s linear 0.5s;
138     -ms-transition: opacity 0s linear 0.5s;
139     -o-transition: opacity 0s linear 0.5s;
140     -webkit-transition: opacity 0s linear 0.5s;
141     transition: opacity 0s linear 0.5s;
142 }
143 ul.navi li:hover ul li.l {
144     -moz-transform: translatex(-70px) translatey(60px);
145     -ms-transform: translatex(-70px) translatey(60px);
146     -o-transform: translatex(-70px) translatey(60px);
147     -webkit-transform: translatex(-70px) translatey(60px);
148     transform: translatex(-70px) translatey(60px);
149 }
150 ul.navi li:hover ul li.c {
151     -moz-transform: translatey(60px);
152     -ms-transform: translatey(60px);
153     -o-transform: translatey(60px);
154     -webkit-transform: translatey(60px);
155     transform: translatey(60px);
156 }
157 ul.navi li:hover ul li.r {
158     -moz-transform: translatex(70px) translatey(60px);
159     -ms-transform: translatex(70px) translatey(60px);
160     -o-transform: translatex(70px) translatey(60px);
161     -webkit-transform: translatex(70px) translatey(60px);
162     transform: translatex(70px) translatey(60px);
163 }

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!

Rate article
© 2025 Script Tutorials