MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (Kiểu 4)

Tương tự kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY), kiểu 3 (Xem TẠI ĐÂY). Menu ngang này cũng xổ dọc xuống nhiều cấp khi bạn bấm vào một menu chính phía trên.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-soc.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu.js">
</script>

<div id="ddtopmenubar" class="slantedmenu">
<ul>
<li><a href="http://www.dunghennessy.blogpsot.com"><span>Trang chủ</span></a></li>
<li><a href="#" rel="ddsubmenu1"><span>Tên menu chính số 1</span></a></li>
<li><a href="#" rel="ddsubmenu2"><span>Tên menu chính số 2</span></a></li>
<li><a href="http://anhdepblog.blogspot.com/"><span>Ảnh đẹp cho Blog</span></a></li>
<li><a href="#" rel="ddsubmenu3"><span>Tên menu chính số 3</span></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>
<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 1, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>


<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 2, các bạn thay đổi tên menu con và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 3, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Chúc các bạn thành công!!! 

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀