Thứ Năm, 3 tháng 4, 2014

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

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

Bài viết liên quan