ECOSYSTEM VIET NAM

passion creative

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!

Advertisements

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: