Tương tự kiểu 1 (Xem TẠI ĐÂY) và kiểu 2 (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.
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-xanhgoc.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="ubercolortabs">
<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>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-xanhgoc.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="ubercolortabs">
<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!!!
{ 0 comments... read them below or add one }
Post a Comment