Tạo menu phân cấp cho Blog/Web

Lê An    4/03/2014    Menu , Thủ thuật blog    Comments   

Hôm nay mình xin giới thiệu đến các bạn một dạng Menu phân cấp bằng code CSS đơn giản dành cho Blog hay Web. Rất tiện lợi cho Blog/web có nhiều Mục nhằm tiện cho bạn quản lý hơn rất thích hợp với những Blog/web chuyên về tin tức hay trang tổng hợp. 

Cách làm như sau:

CSS

1- Đăng nhập vào Blog
2- Vào phần Mẫu
3- Chọn Chỉnh Sửa HTML
4- Tìm đến thẻ ]]></b:skin>  (Bạn dùng tổ hợp phím Ctrl +F tìm cho nhanh )
5- Copy và dán đoạn code phía dưới vào phía trên thẻ ]]></b:skin>

nav {
  font:bold 11px Arial,Sans-Serif;  
  text-transform:uppercase;
}
nav ul {
  background-color:black;
  color:white;
  margin:0px 0px;
  padding:0px 0px;
  height:30px;  
}
nav li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  position:relative;  
}
nav li a {
  display:block;
  text-decoration:none;
  color:#999;
  line-height:30px;
  padding:0px 15px;  
}
nav li a:hover,
nav li:hover > a {
  background-color:#009;
  color:white;  
}
nav li ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  width:200px;
  height:auto;
  display:none;  
}
nav li ul li {
  float:none;
  display:block;  
}
nav li ul ul {
  top:0px;
  left:100%;  
}
nav li:hover > ul {
  display:block;
}

HTML

Để hiển thị Thanh MENU ở bất kỳ đâu trên Blog/web của bạn. Bạn dùng đoạn code như sau:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a>
            <ul>
                <li><a href="#">2008</a></li>
                <li><a href="#">2009</a>
                    <ul>
                        <li><a href="#">Januari</a></li>
                        <li><a href="#">Februari</a></li>
                        <li><a href="#">Maret</a></li>
                    </ul>
                </li>
                <li><a href="#">2010</a></li>
                <li><a href="#">2011</a></li>
                <li><a href="#">2012</a></li>
            </ul>
        </li>
        <li><a href="#">Giới Thiệu</a></li>
    </ul>
</nav>

DEMO