Tạo Menu Multi column-Level nhiều cột thả xuống

Menu với các link xổ xuống nhiều dòng dạng Multi-Level Drop down  đã chính thức được phattrien@so  giới thiệu với các bạn trong bài:

> Tạo Menu Multi-Level Drop Down cho Blogspot

là dạng menu Side bar menu; Tuy nhiên với menu đã giới thiệu có nhược điểm là chỉ có một cột xổ xuống các link. Để khắc phục nhược điển trên, trong  bài viết này phattrien@so xin giới thiệu với các bạn thủ thuật tạo Menu với nhiều cột (multi level) dạng thả xuống như hình vẽ trên. Bạn có thể tùy chỉnh số cột của menu cũng như điều chỉnh số lượng link trong mỗi cột.

Các bạn có thể xem bản demo tại:: ClubVista Template

Các bước thực hiện để có tiện ích menu như trên:

Bước 1:
Download  2 files dưới:
DDM1_script.js, and
DDM1_style.css

Download zipped file Tại đây.

Bước 2:
Upload chúng lên HotLinkFiles.com, và lấy LINK trực tiếp 2 file này từ HotLinkFiles.

Bước 3:
Log in vào Blogger, vào Layout và click chọn "Edit HTML"

Bước 4:
Tìm (CTRL+F) đoạn code:

</head>

và Dán trên nó đoạn mã dưới:

<!--MULTI-LEVEL-DD-MENU-STARTS-->
<link rel="stylesheet" href="http://......HotLinkFiles.com...../DDM1_style.css" type="text/css" />
<script type="text/javascript" src="http://......HotLinkFiles.com...../DDM1_script.js"></script>
<!--MULTI-LEVEL-DD-MENU-http://www.vnpressnet.com-->

Thay thế link màu đỏ bằng LINK trực tiếp mà bạn đã thực hiện ở Bước 2.

Bước 5:
Bạn vào "Layout" -> "Edit HTML" -> "Page Elements" và click vào "Add a Gadget" và chọn kiểu tiện ích "HTML/JavaScript".

Và dán đoạn code dưới vào đó:

<!--MULTI-LEVEL-DD-MENU-STARTS-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="http://www.vnpressnet.com" class="menulink">Blogger Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<!--MULTI-LEVEL-DD-MENU-http://www.vnpressnet.com-->

Như vậy bạn đã thực hiện được Menu dạng thanh ngang bao gồm các cộc chính sổ xuống các menu phụ cùng nội dung chính như hình minh họa trên. Tất nhiên bạn phải điều chỉnh nội dung các Navigation Item cũng như đường link # trước khi lưu lại công việc đã thưucj hiện.
Tiện ích Menu trên được phattrien@so tham khảo từ: Leigeber và Boggerstop

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.