TẠO MENU NGANG CÓ NHIỀU MENU CON XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1)
Ngoài cách trên, bạn có thể tạo cho mình một menu có nhiều menu con xổ dọc xuống khi bạn click vào một menu chính bất kỳ, điều này sẽ làm cho Blog bạn trông "gọn gàng" hơn và "Pro" hơn rất nhiều.
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này
Xem thử
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này
Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó dán toàn bộ code phía dưới vào.
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>
<li><a href="#"> Tên menu chính 1 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
</ul>
</li>
<li><a href="#"> Tên menu chính 2</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>
<li><a href="#"> Tên menu chính 4</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>
<li><a href="#"> Tên menu phụ 4 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href="#"> Tên menu phụ 4/2 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>
</ul>
<br style="clear: left" />
</div></!doctype>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>
<li><a href="#"> Tên menu chính 1 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
</ul>
</li>
<li><a href="#"> Tên menu chính 2</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>
<li><a href="#"> Tên menu chính 4</a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>
<li><a href="#"> Tên menu phụ 4 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
<li><a href="#"> Tên menu phụ 4/2 </a>
<ul>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>
</ul>
<br style="clear: left" />
</div></!doctype>
Bây giờ bạn chỉ việc thay đổi các dòng lệnh màu đỏ và màu xanh theo ý của bạn, cuối cùng bấm Lưu và trở lại blog bạn sẽ thấy blog của mình sẽ có một menu ngang xổ dọc xuống các menu con khá tiện dụng...
Chúc bạn thành công
Read more: TẠO MENU NGANG CÓ NHIỀU MENU CON XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1) | dunghennessy
Under Creative Commons License: Attribution Share Alike
Post a Comment
Cảm ơn bạn đã ghé thăm Blog của mình!
Để nhận thông báo mới nhất về bài đăng bạn hãy tick vào ô vuông bên phải ("Thông báo cho tôi")
Cảm ơn bạn!