飘逸的 CSS3 导航菜单

在线演示：  http://www.script-tutorials.com/demos/260/index.html 

源码打包：http://www.script-tutorials.com/demos/260/source.zip

标签： CSS3

代码片段(2)

[代码] 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>

[代码] 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 }