Home » Tutorials

Flying CSS3 Navigation Menu

Tutorials
Author Reading 11 min Views 927 Published by Modified by

Today, I would like to show you another pure css3 navigation menu where I implemented several nice animate effects. I have just taught our sub menus to fly from nothing, and beat as the heart when you hover your mouse over elements. If you are ready, lets start.

 

Here are samples and downloadable package:

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

[sociallocker]

download in package

[/sociallocker]

Ok, download the sources and lets start coding !

Step 1. HTML

In the beginning, we have to prepare HTML layout of our menu. Here is the html code. As usual – this is usual UL-LI based navigation menu. The most interesting thing is CSS styles of course.

index.html

01 <ul id="nav">
02     <li><a href="https://www.script-tutorials.com/">Home</a></li>
03     <li><a class="hsubs" href="#">Menu 1</a>
04         <ul class="subs">
05             <li><a href="#">Submenu 1</a></li>
06             <li><a href="#">Submenu 2</a></li>
07             <li><a href="#">Submenu 3</a></li>
08             <li><a href="#">Submenu 4</a></li>
09             <li><a href="#">Submenu 5</a></li>
10         </ul>
11     </li>
12     <li><a class="hsubs" href="#">Menu 2</a>
13         <ul class="subs">
14             <li><a href="#">Submenu 2-1</a></li>
15             <li><a href="#">Submenu 2-2</a></li>
16             <li><a href="#">Submenu 2-3</a></li>
17             <li><a href="#">Submenu 2-4</a></li>
18             <li><a href="#">Submenu 2-5</a></li>
19             <li><a href="#">Submenu 2-6</a></li>
20             <li><a href="#">Submenu 2-7</a></li>
21             <li><a href="#">Submenu 2-8</a></li>
22         </ul>
23     </li>
24     <li><a class="hsubs" href="#">Menu 3</a>
25         <ul class="subs">
26             <li><a href="#">Submenu 3-1</a></li>
27             <li><a href="#">Submenu 3-2</a></li>
28             <li><a href="#">Submenu 3-3</a></li>
29             <li><a href="#">Submenu 3-4</a></li>
30             <li><a href="#">Submenu 3-5</a></li>
31         </ul>
32     </li>
33     <li><a href="#">Menu 4</a></li>
34     <li><a href="#">Menu 5</a></li>
35     <li><a href="#">Menu 6</a></li>
36     <li><a href="https://www.script-tutorials.com/flying-css3-navigation-menu/">Back</a></li>
37 </ul>

Step 2. CSS

Here are the CSS styles of our flying menu.

css/menu.css

001 #nav,#nav ul {
002     list-style: none outside none;
003     margin: 0;
004     padding: 0;
005 }
006 #nav {
007     font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
008     font-size: 13px;
009     height: 36px;
010     list-style: none outside none;
011     margin: 40px auto;
012     text-shadow: 0 -1px 3px #202020;
013     width: 980px;
014     /* border radius */
015     -moz-border-radius:4px;
016     -webkit-border-radius:4px;
017     border-radius:4px;
018     /* box shadow */
019     -moz-box-shadow: 0px 3px 3px #cecece;
020     -webkit-box-shadow: 0px 3px 3px #cecece;
021     box-shadow: 0 3px 4px #8b8b8b;
022     /* gradient */
023     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
024     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
025     background-color:#5f5f5f;
026 }
027 #nav ul {
028     left: -9999px;
029     position: absolute;
030     top: -9999px;
031     z-index: 2;
032 }
033 #nav li {
034     border-bottom: 1px solid #575757;
035     border-left: 1px solid #929292;
036     border-right: 1px solid #5d5d5d;
037     border-top: 1px solid #797979;
038     display: block;
039     float: left;
040     height: 34px;
041     position: relative;
042     width: 105px;
043 }
044 #nav li:first-child {
045     border-left: 0 none;
046     margin-left: 5px;
047 }
048 #nav li a {
049     color: #FFFFFF;
050     display: block;
051     line-height: 34px;
052     outline: medium none;
053     text-align: center;
054     text-decoration: none;
055     /* gradient */
056     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
057     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
058     background-color:#5f5f5f;
059 }
060 /* keyframes #animation1 */
061 @-webkit-keyframes animation1 {
062     0% {
063         -webkit-transform: scale(1);
064     }
065     30% {
066         -webkit-transform: scale(1.3);
067     }
068     100% {
069         -webkit-transform: scale(1);
070     }
071 }
072 @-moz-keyframes animation1 {
073     0% {
074         -moz-transform: scale(1);
075     }
076     30% {
077         -moz-transform: scale(1.3);
078     }
079     100% {
080         -moz-transform: scale(1);
081     }
082 }
083 #nav li > a:hover {
084     /* css3 animation */
085     -moz-animation-name: animation1;
086     -moz-animation-duration: 0.7s;
087     -moz-animation-timing-function: linear;
088     -moz-animation-iteration-count: infinite;
089     -moz-animation-direction: normal;
090     -moz-animation-delay: 0;
091     -moz-animation-play-state: running;
092     -moz-animation-fill-mode: forwards;
093     -webkit-animation-name: animation1;
094     -webkit-animation-duration: 0.7s;
095     -webkit-animation-timing-function: linear;
096     -webkit-animation-iteration-count: infinite;
097     -webkit-animation-direction: normal;
098     -webkit-animation-delay: 0;
099     -webkit-animation-play-state: running;
100     -webkit-animation-fill-mode: forwards;
101 }
102 #nav li:hover > a {
103     z-index: 4;
104 }
105 #nav li:hover ul.subs {
106     left: 0;
107     top: 34px;
108     width: 150px;
109 }
110 #nav ul li {
111     background: none repeat scroll 0 0 #838383;
112     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
113     opacity: 0;
114     width: 100%;
115     /*-webkit-transition:all 0.3s ease-in-out;
116     -moz-transition:all 0.3s ease-in-out;
117     -o-transition:all 0.3s ease-in-out;
118     -ms-transition:all 0.3s ease-in-out;
119     transition:all 0.3s ease-in-out;*/
120 }
121 /* keyframes #animation2 */
122 @-webkit-keyframes animation2 {
123     0% {
124         margin-left:185px;
125     }
126     100% {
127         margin-left:0px;
128         opacity:1;
129     }
130 }
131 @-moz-keyframes animation2 {
132     0% {
133         margin-left:185px;
134     }
135     100% {
136         margin-left:0px;
137         opacity:1;
138     }
139 }
140 #nav li:hover ul li {
141     /* css3 animation */
142     -moz-animation-name: animation2;
143     -moz-animation-duration: 0.3s;
144     -moz-animation-timing-function: linear;
145     -moz-animation-iteration-count: 1;
146     -moz-animation-direction: normal;
147     -moz-animation-delay: 0;
148     -moz-animation-play-state: running;
149     -moz-animation-fill-mode: forwards;
150     -webkit-animation-name: animation2;
151     -webkit-animation-duration: 0.3s;
152     -webkit-animation-timing-function: linear;
153     -webkit-animation-iteration-count: 1;
154     -webkit-animation-direction: normal;
155     -webkit-animation-delay: 0;
156     -webkit-animation-play-state: running;
157     -webkit-animation-fill-mode: forwards;
158     /*-webkit-transition:all 0.3s ease-in-out;
159     -moz-transition:all 0.3s ease-in-out;
160     -o-transition:all 0.3s ease-in-out;
161     -ms-transition:all 0.3s ease-in-out;
162     transition:all 0.3s ease-in-out;*/
163 }
164 /* animation delays */
165 #nav li:hover ul li:nth-child(1) {
166     -moz-animation-delay: 0;
167     -webkit-animation-delay: 0;
168 }
169 #nav li:hover ul li:nth-child(2) {
170     -moz-animation-delay: 0.05s;
171     -webkit-animation-delay: 0.05s;
172 }
173 #nav li:hover ul li:nth-child(3) {
174     -moz-animation-delay: 0.1s;
175     -webkit-animation-delay: 0.1s;
176 }
177 #nav li:hover ul li:nth-child(4) {
178     -moz-animation-delay: 0.15s;
179     -webkit-animation-delay: 0.15s;
180 }
181 #nav li:hover ul li:nth-child(5) {
182     -moz-animation-delay: 0.2s;
183     -webkit-animation-delay: 0.2s;
184 }
185 #nav li:hover ul li:nth-child(6) {
186     -moz-animation-delay: 0.25s;
187     -webkit-animation-delay: 0.25s;
188 }
189 #nav li:hover ul li:nth-child(7) {
190     -moz-animation-delay: 0.3s;
191     -webkit-animation-delay: 0.3s;
192 }
193 #nav li:hover ul li:nth-child(8) {
194     -moz-animation-delay: 0.35s;
195     -webkit-animation-delay: 0.35s;
196 }

CSS3 does their miracle job. And we have just taught our sub menus to fly from nothing, and beat as the heart when you hover your mouse.

Live Demo

Conclusion

Hope you enjoyed with our new CSS3 menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!

Rate article
© 2026 Script Tutorials