TẠO MENU NGANG CÓ NHIỀU MENU CON XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1)

Posted by chiasedamme on Sunday, May 15, 2011

Nếu trên Blog của bạn có quá nhiều trang riêng lẻ thì công việc tạo menu ngang là cần thiết, có nhiều cách để tạo ra menu ngang (bạn có thể xem các mẫu menu ngang đơn giản TẠI ĐÂY).
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ử

Để 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>

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

{ 0 comments... read them below or add one }

Post a Comment