Tạo menu với hiệu ứng Dropdown bằng CSS3

Như các bài về tạo dropdown mà mấy lần trước mình đã post, hôm nay chúng ta sẽ tiếp tục làm menu dạng dropdown bằng CSS3 với hiệu ứng mới, rất đáng để bạn tham khảo, các bạn có thể xem demo tại đây.
Nào chúng ta cùng bắt đầu tạo menu nào:

Bước 1: HTML
Với đoạn html sau các bạn chỉ cần thay tên và link trỏ đến là có thể sử dụng cho website hay blog của bạn.

<div>
<ul id="nav">
<li><a href="http://www.thuthuatweb.net/">Home</a></li>
<li><a href="#">Tutorials</a>
<div>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</li>
<li><a href="#">Resources</a>
<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</li>
<li><a href="#">Other pages</a>
<div>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Go Back To The Tutorial</a></li>
<li></li>
</ul>
</div>

Bước 2 : CSS
Giờ là lúc để chúng ta đưa css vào :

/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
position:relative;
background:#fff url(../images/background.jpg);
awidth:670px;
height:470px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/* main menu styles */
#nav,#nav ul {
font-family:verdana;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#nav {
height:50px;
left:0;
overflow:hidden;
top:0;
}
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background:url(../images/bg-menu.png) no-repeat center top;
color:#fff;
display:block;
float:left;
font-size:14px;
height:51px;
line-height:40px;
padding:0 10px;
position:relative;
text-decoration:none;
z-index:20;
}
#nav li:first-child a {
background:url(../images/bg-menu.png) no-repeat left top;
padding-left:35px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}
#nav li.pad {
background:url(../images/bg-menu.png) no-repeat right top;
display:block;
height:51px;
awidth:35px;
}
#nav ul {
background:#009900;
height:auto;
padding:10px 0;
position:absolute;
top:-115px;
awidth:180px;
z-index:1;

border-radius:8px; /*some css3*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
transition:0.8s ease-in-out;
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition:0.8s ease-in-out;
-o-transition:0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
awidth:180px;
}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
awidth:160px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#99ff33;
}

Chú ý : Các bạn có thể save những file hình mà mình sử dụng trong css ở phần demo nhá.
Vậy là từ giờ chúng ta lại có thêm một sự lựa chọn cho các menu của web mình rồi phải không các bạn. Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster