MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 2)
|
vuongsungdong
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.
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/sdmenu.js"></script>
<script type="text/javascript">
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<link rel="stylesheet" type="text/css" href="http://bloggiaovienthaibinh.110mb.com/sdmenu/sdmenu/sdmenu.css" />
<form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
<input type="button" value="Hiện Menu" onclick="myMenu.expandAll()" />
<input type="button" value="Rút gọn menu" onclick="myMenu.collapseAll()" />
</form>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>Tên menu chính 1</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
<a href="#">Tên menu phụ 5</a>
</div>
<div>
<span>Tên menu chính 2</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
</div>
<div class="collapsed">
<span>Tên menu chính 3</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
</div>
<div>
<span>Tên menu chính 4</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
<a href="#">Tên menu phụ 5</a>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<link rel="stylesheet" type="text/css" href="http://bloggiaovienthaibinh.110mb.com/sdmenu/sdmenu/sdmenu.css" />
<form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
<input type="button" value="Hiện Menu" onclick="myMenu.expandAll()" />
<input type="button" value="Rút gọn menu" onclick="myMenu.collapseAll()" />
</form>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>Tên menu chính 1</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
<a href="#">Tên menu phụ 5</a>
</div>
<div>
<span>Tên menu chính 2</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
</div>
<div class="collapsed">
<span>Tên menu chính 3</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
</div>
<div>
<span>Tên menu chính 4</span>
<a href="#">Tên menu phụ 1</a>
<a href="#">Tên menu phụ 2</a>
<a href="#">Tên menu phụ 3</a>
<a href="#">Tên menu phụ 4</a>
<a href="#">Tên menu phụ 5</a>
</div>
</div>
Bây giờ, bạn cần thay đổi tên menu chính và phụ, 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.
Mở rộng thêm:
Nếu muốn thêm menu phụ thì bạn copy đoạn code này:
<a href="#">Tên menu phụ 1</a>
Dán tiếp xuống phía dưới Menu chính nào mà mình muốn thêm.
Còn muốn thêm một menu chính thì bạn copy đoạn code này:
<div> <span>Tên menu chính 2</span> <a href="#">Tên menu phụ 1</a> <a href="#">Tên menu phụ 2</a>
</div>
Dán trên thẻ </div> cuối cùng.
Chúc các bạn thành công!!!
theo http://dunghennessy.blogspot.com
Posted in
MẸO VẶT BLOGGER
0 nhận xét cho bài đăng này
Hãy để lại nhận xét nếu bạn thích bài đăng này