humghn.com
Trong bài đăng lần trước , chuyên mục đã gửi tới các bạn cách tạo menu ngang xổ dọc nhiều cấp , và ngày hôm nay , để đa dạng thêm sự lựa chọn cho các bạn , chuyên mục tiếp tục gửi đến các bạn một mẫu menu ngang xổ dọc nhiều cấp mới . Hơn nữa , trong mẫu mới này , mình sẽ hướng dẫn cụ thể các bạn cách tùy chỉnh từng chi tiết trong loại menu ngang xổ dọc nhiều cấp này . Mời các bạn cùng xem demo
Cách thực hiện
Bước 1 : Đăng nhập vào blogspot , chọn " Mẫu " , sau đó chọn " Chỉnh sửa HTML "
Bước 2 : Dán đoạn mã dưới đây vào sau thẻ <head> và sau đó nhấp " Lưu "
<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-xo-doc-2/drop_menu.js' type='text/javascript'/>
Bước 3 : Chọn mục " Bố cục " và thêm tiện ích " HTML/JavaScript "Bước 4 : Dán đoạn mã dưới đây vào tiện ích HTML/JavaScript vừa tạo
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>
<div id="myslidemenu" class="jqueryslidemenu">
<ul><li><a href="#">Cuộc sống</a></li>
<li><a href="#">Học tập</a></li>
<li><a href="#">Thủ thuật</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="#">Giải trí</a></li>
<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>
<li><a href="#">Vườn thơ</a></li>
<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>
</ul><br style="clear: left" />
</div>
Trong đoạn code trên , các dấu # bạn thay bằng địa chỉ linkCác " Sub Item " bạn thay bằng tên hiển thị bạn muốn hiển thị . Các Sub Item đã được đánh số từ thư mục cha đến thư mục con khá là khoa học . Bạn chỉ cần xem DEMO là sẽ hiểu .
Các tùy chỉnh khác trong code trên
padding: 5px; Điều chỉnh độ rộng của menu
margin: 0px; Điều chỉnh khoảng cách giữa các sub menu
Bạn muốn thay đổi thông số nào , bạn chỉ cần sửa lại số đằng trước đơn vị " px " ; ví dj 2px ; 1px ..v..v..
Trong đoạn code trên , bạn cũng có thêm các menu , menu con tùy ý . Trong phần trên , mình thêm 7 menu cho các bạn . Bạn có thê tăng con số đó lên 8 , 9 ,10 và hàng chục menu con khác bằng cách sau
- Để thêm menu chính , bạn thêm đoạn code sau vào đoạn code được bôi cam
<li><a href="#">Tên menu chính</a></li>
Để thêm các menu phụ ( menu con ) , bạn thêm đoạn mã code sau vào trước các thẻ </li> tương ứng của menu cần tạo menu con<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
Chúc các bạn thành công ! 