Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Tạo menu bay lượn bằng CSS3

Posted by millionking on February 14, 2014

Đầu tiên chúng ta tạo file HTML trước

01 <ul id="nav">
02             <li><a href="http://minhtriet09it.blogspot.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="/tao-menu-bay-luon-bang-css3.html">Back</a></li>
37         </ul>

Và phần quan trọng nhất là đây, đoạn CSS giúp bạn làm nên những điều thần kỳ

001 #nav,#nav ul {
002     list-stylenone outside none;
003     margin0;
004     padding0;
005 }
006 #nav {
007     font-family"Lucida Sans Unicode",Verdana,Arial,sans-serif;
008     font-size13px;
009     height36px;
010     list-stylenone outside none;
011     margin40px auto;
012     text-shadow0 -1px 3px #202020;
013     width980px;
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 bottomleft 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     positionabsolute;
033     top-9999px;
034     z-index2;
035 }
036 #nav li {
037     border-bottom1px solid #575757;
038     border-left1px solid #929292;
039     border-right1px solid #5d5d5d;
040     border-top1px solid #797979;
041     displayblock;
042     floatleft;
043     height34px;
044     positionrelative;
045     width105px;
046 }
047 #nav li:first-child {
048     border-left0 none;
049     margin-left5px;
050 }
051 #nav li a {
052     color#FFFFFF;
053     displayblock;
054     line-height34px;
055     outlinemedium none;
056     text-aligncenter;
057     text-decorationnone;
058
059     /* gradient */
060     background-image: -webkit-gradient(linear, left bottomleft 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-directionnormal;
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-directionnormal;
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-index4;
110 }
111 #nav li:hover ul.subs {
112     left0;
113     top34px;
114     width150px;
115 }
116 #nav ul li {
117     backgroundnone repeat scroll 0 0 #838383;
118     box-shadow: 5px 5px 5px rgba(0000.5);
119     opacity: 0;
120     width100%;
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-directionnormal;
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-directionnormal;
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 }

Thật tuyệt phải không nào! Chúc các bạn thành công!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: