Tạo Dropdown Menu với menu đa cấp bằng CSS3

26/08/2012

Tạo Dropdown Menu với menu đa cấp bằng CSS3
Ngày nay việc sử dụng menu thuần CSS đã trở nên rất phổ biến, hầu hết là cá menu dạng UL – LI. Hôm nay mình tiếp tục giới thiệu cho các bạn một menu đẹp nữa, đây là menu dạng dropdown đa cấp, các submenu sẽ xuất hiện khi bạn click chuột (onclick) chứ không phải khi trỏ chuột tới (onhover). Đây là demo bài viết các bạn có thể tham khảo.
Bây giờ là lúc chúng ta tiến hành từng bước nào :

Bước 1 : HTML

<div>
<ul id="nav">
<li><a href="http://www.thuthuatweb.net">Home</a></li>
<li><a href="#" tabindex="1">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#" tabindex="1">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</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>
</li>
<li><a href="#" tabindex="1">Resources</a>
<ul>
<li><a href="#" tabindex="1">By category</a>
<ul>
<li><a href="http://www.thuthuatweb.net/php">PHP</a></li>
<li><a href="http://www.thuthuatweb.net/sql/">MySQL</a></li>
<li><a href="#" tabindex="1">Menu1</a>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#" tabindex="1">Menu3</a>
<ul>
<li><a href="#">Menu31</a></li>
<li><a href="#">Menu32</a></li>
<li><a href="#">Menu33</a></li>
<li><a href="#">Menu34</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
</ul>
</li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#" tabindex="1">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.thuthuatweb.net/lien-he/">About</a></li>
<li><a href="http://www.thuthuatweb.net/css/">Go Back To The Tutorial</a></li>
</ul>
</div>

Bước 2 : CSS

Và đây là toàn bộ đoạn css giúp bạn làm menu

/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(images/tech.jpg);
width:770px;
height:570px;
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 {
background-image:url(images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;

overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}

/*focus styles*/
#nav li a:focus {
outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}

Hy vọng với bài viết này sẽ giúp bạn tạo ra các menu đa cấp tuyệt đẹp cho website hay blog của bạn. Chúc các bạn thành công !

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Mình ko làm được, menu con ko hiện ra 🙁

  • nhan

    Chào anh ! nếu anh đọc được bài viết này thì hãy add fb này : https://www.facebook.com/profile.php?id=100004358102159 để trao đổi với nhau nhiều hơn nữa về web nha ! bài anh viết hay hay lắm , đây là nguồn code cũng như hành trang cho em sau này! thanks anh rất rất nhiều