css3做的飞入导航菜单

 

Your Site Is Slow! Speed It Up!

 

Flying CSS3 Navigation Menu

 

Date: 13th Apr 2012 Author: admin 7 Comments

Posted in: HTML/CSS |Tags: css3, flying menu, navigation, tutorial

131

Tweet

advertise here

Flying CSS3 Navigation Menu

 

Flying CSS3 Navigation Menu

 

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:

Live Demo

download in package

 

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

<ul id=”nav”>
<li><a href=”http://www.script-tutorials.com/”>Home</a></li>
<li><a class=”hsubs” href=”#”>Menu 1</a>
<ul class=”subs”>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
<li><a href=”#”>Submenu 3</a></li>
<li><a href=”#”>Submenu 4</a></li>
<li><a href=”#”>Submenu 5</a></li>
</ul>
</li>
<li><a class=”hsubs” href=”#”>Menu 2</a>
<ul class=”subs”>
<li><a href=”#”>Submenu 2-1</a></li>
<li><a href=”#”>Submenu 2-2</a></li>
<li><a href=”#”>Submenu 2-3</a></li>
<li><a href=”#”>Submenu 2-4</a></li>
<li><a href=”#”>Submenu 2-5</a></li>
<li><a href=”#”>Submenu 2-6</a></li>
<li><a href=”#”>Submenu 2-7</a></li>
<li><a href=”#”>Submenu 2-8</a></li>
</ul>
</li>
<li><a class=”hsubs” href=”#”>Menu 3</a>
<ul class=”subs”>
<li><a href=”#”>Submenu 3-1</a></li>
<li><a href=”#”>Submenu 3-2</a></li>
<li><a href=”#”>Submenu 3-3</a></li>
<li><a href=”#”>Submenu 3-4</a></li>
<li><a href=”#”>Submenu 3-5</a></li>
</ul>
</li>
<li><a href=”#”>Menu 4</a></li>
<li><a href=”#”>Menu 5</a></li>
<li><a href=”#”>Menu 6</a></li>
<li><a href=”http://www.script-tutorials.com/flying-css3-navigation-menu/”>Back</a></li>
</ul>

Step 2. CSS

 

Here are the CSS styles of our flying menu.

css/menu.css

view source

print?

#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: “Lucida Sans Unicode”,Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 980px;

/* border radius */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

/* box shadow */
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;

/* gradient */
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));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#nav ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#nav li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#nav li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#nav li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;

/* gradient */
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));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
0% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes animation1 {
0% {
-moz-transform: scale(1);
}
30% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(1);
}
}
#nav li > a:hover {
/* css3 animation */
-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
z-index: 4;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#nav ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;

/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
@-moz-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
#nav li:hover ul li {
/* css3 animation */
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}

 

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.

Your Site Is Slow! Speed It Up!

 

Flying CSS3 Navigation Menu

Date: 13th Apr 2012 Author: admin 7 Comments
Posted in: HTML/CSS |Tags: , , ,

 131  
Flying CSS3 Navigation Menu

Flying CSS3 Navigation Menu

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:

Live Demo
download in package

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

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.

 » 转载请注明来源:网络蛀虫小窝 » 《css3做的飞入导航菜单》
 » 本站地址:http://www.gomoth.com

标签: ,