"Tạo menu nhiều cấp (Multiple Level Menus) với hiệu ứng Drop down khá mướt cho Blogspot"

(Traidatmui.com) – Mình đã từng chia sẻ cùng các bạn một số dạng menu dành cho Blogspot và hôm mình xin chia sẻ tiếp một style cũng khá là đẹp mắt. Đây là dạng menu có nhiều cấp hay nói cách khác là có nhiều menu con thả xuống. Menu này được hình thành trên Javascript với hiệu ứng thả xuống rất mướt và bạn sẽ thiết lập các tên hay link cho menu trong ngôn ngữ Script. Thủ thuật này cũng không phải là đơn gian nên các bạn hãy cẩn thận ở phần thiết lập các thư mục trong menu, nếu không nó sẽ không thể hoạt động như ý muốn. Bạn có thể xem hình ảnh minh họa và phần LIVE DEMO để thấy rỏ hơn hiệu ứng của menu này.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Menu_Dropdown_Multi-Level.js"></script>

5. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
#ja-mainnavwrap {
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoDFm7OI/AAAAAAAAAKg/7S_f_IZTyu4/mainnav-bg.gif) repeat-x top #FFFFFF; /* màu nền menu chính*/
}
.clearfix:after {
clear: both;
display: block;
content: "";
height: 0;
visibility: hidden;
}
.transMenu {
position: absolute;
overflow: hidden;
}
.transMenu .background {
background:#eee; /*màu nền phần submenu*/
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
-moz-opacity: .5;
filter: alpha(opacity=90);
}
.transMenu .content {
position: absolute;
}
.transMenu .items {
position: relative;
left: 0px;
top: 0px;
z-index: 2;
}
.transMenu .shadowRight {
width: 2px;
position: absolute;
z-index: 3;
top: 3px;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.transMenu .shadowBottom {
position: absolute;
z-index: 1;
left: 3px;
height: 2px;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.transMenu .item {
color: #333; /*màu chữ phần submenu*/
text-decoration: none;
text-transform: none;
border: none;
cursor: pointer;
font-size: 11px; /*cở chữ phần submenu*/
}
.transMenu .item.hover {
color: #fff; /*màu chữ phần submenu khi rê chuột*/
background: #000; /*màu nền phần submenu khi rê chuột*/
}

.transMenu .item img {
margin-left: 10px;
}
.transMenu .item#active {
background: #484848;
color: #FFFFFF;
}
.transMenu .item#active:hover {
color: #FFFFFF;
background: #ff0000;
}
#ja-transmenu {
margin: 0;
padding: 0;
float: left;
}
#ja-transmenu li {
margin: 0;
padding: 0;
background: none;
display: inline;
}
#ja-transmenu li a {
color: #ff0000; /* màu chữ của menu chính*/
margin: 0;
padding: 8px 20px 7px;
float: left;
display: block;
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoVUpBPI/AAAAAAAAAKk/zwj21fS-urk/mainnav-sep.gif) no-repeat top right;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
#ja-transmenu li a:hover {
background: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TZRPoVUpBPI/AAAAAAAAAKk/zwj21fS-urk/mainnav-sep.gif) no-repeat top right #fff;
color: #666; /* màu chữ của menu chính khi rê chuột*/
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Chọn thêm tiện ích (Add a Gadget)
8. Thêm 1 HTML/Javascript và thêm vào nó code bên dưới
<div id="ja-mainnavwrap" class="clearfix">
<div id="ja-mainnav">
<div class="transmenu-inner">
<ul id="ja-transmenu">
<li><a href="URL link" class="mainlevel-trans" id="home"><span>TRANG CHỦ</span></a></li>
<li><a href="URL link" class="mainlevel-trans" id="menu1"><span>MENU 1</span></a></li>
<li><a href="URL link" class="havechild-mainlevel-active-trans" id="menu2"><span>MENU 2</span></a></li>
<li><a href="URL link" class="havechild-mainlevel-trans" id="menu3"><span>MENU 3</span></a></li>
<li><a href="URL link" class="havechild-mainlevel-trans" id="menu4"><span>MENU 4</span></a></li>
<li><a href="URL link" class="havechild-mainlevel-trans" id="menu5"><span>MENU 5</span></a></li>
<li><a href="URL link" class="mainlevel-trans" id="menu6"><span>MENU 6</span></a></li>
<li><a href="URL link" class="havechild-mainlevel-trans" id="menu7"><span>MENU 7</span></a></li>
<li><a href="URL link" class="mainlevel-trans" id="menu8"><span>MENU 8</span></a></li>

</ul>

<script type="text/javascript" language="javascript">
if (TransMenu.isSupported()) {

var ms = new TransMenuSet(TransMenu.direction.down, 0, 0, TransMenu.reference.bottomLeft);
TransMenu.subpad_x = 0;
TransMenu.subpad_y = 0;

document.getElementById("home").onmouseover = function() {
ms.hideCurrent();
}
document.getElementById("menu1").onmouseover = function() {
ms.hideCurrent();
}

var tmenu2 = ms.addMenu(document.getElementById("menu2"));
tmenu2.addItem("Submenu 2.1", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.2", "URL link", 0, 1);
tmenu2.addItem("Submenu 2.3", "URL link", 0, 0);
var tmenu23 = tmenu2.addMenu(tmenu2.items[2]);
tmenu23.addItem("Submenu 2.3.1", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.2", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.3", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.4", "URL link", 0, 0);
tmenu23.addItem("Submenu 2.3.5", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.4", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.5", "URL link", 0, 0);
tmenu2.addItem("Submenu 2.6", "URL link", 0, 0);

var tmenu3 = ms.addMenu(document.getElementById("menu3"));
tmenu3.addItem("Submenu 3.1", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.2", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.3", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.4", "URL link", 0, 0);
tmenu3.addItem("Submenu 3.5", "URL link", 0, 0);

var tmenu4 = ms.addMenu(document.getElementById("menu4"));
tmenu4.addItem("Submenu 4.1", "URL link", 0, 0);
var tmenu41 = tmenu4.addMenu(tmenu4.items[0]);
tmenu41.addItem("Submenu 4.1.1", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.2", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.3", "URL link", 0, 0);
tmenu41.addItem("Submenu 4.1.4", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.2", "URL link", 0, 0);
var tmenu42 = tmenu4.addMenu(tmenu4.items[1]);
tmenu42.addItem("Submenu 4.2.1", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.2", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.3", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.4", "URL link", 0, 0);
tmenu42.addItem("Submenu 4.2.5", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.3", "URL link", 0, 0);
tmenu4.addItem("Submenu 4.4", "URL link", 0, 0);

var tmenu5 = ms.addMenu(document.getElementById("menu5"));
tmenu5.addItem("Submenu 5.1", "URL link", 0, 0);
tmenu5.addItem("Submenu 5.2", "URL link", 0, 0);
tmenu5.addItem("Submenu 5.3", "URL link", 0, 0);

document.getElementById("menu6").onmouseover = function() {
ms.hideCurrent();
}
var tmenu7 = ms.addMenu(document.getElementById("menu7"));
tmenu7.addItem("Submenu 7.1", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.2", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.3", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.4", "URL link", 0, 0);
tmenu7.addItem("Submenu 7.5", "URL link", 0, 0);

document.getElementById("menu8").onmouseover = function() {
ms.hideCurrent();
}


TransMenu.renderAll();
}
init1=function(){TransMenu.initialize();}
if (window.attachEvent) {
window.attachEvent("onload", init1);
}else{
TransMenu.initialize();
}
TransMenu.spacerGif = "https://lh5.googleusercontent.com/_9-sNIAfGhKg/TZRCOgRadyI/AAAAAAAAAKE/C4woVGLQKkg/x.gif";
</script>

</div></div>

</div>

☼ Chỉnh code:

- Phần màu xanh đậm chính là tên của các menu chính, bạn có thể thay chúng thành tên của các menu phù hợp với blog của bạn.
- Các URL link chính là các link tương ứng cho các menu
- Các ID màu cam bạn chú ý phải cho chúng trùng khớp ở trên phần menu chính và các Submenu.
- Các submenu màu xanh là tên các thư mục con cấp 1 và phần màu tím là các thư mục con cấp 2, bạn hãy thay chúng tương ứng với từng thư mục.

9. Sau khi chỉnh sửa xong bạn save tiện ích lại

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

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

XDN
4/22/2011 10:44:00 CH Trả lời

anh ơi,sao em làm mà các menu con cách menu chính q khoảng vậy anh.

http://12a2group.blogspot.com/
Anh xem dum em với.

5/13/2011 08:46:00 CH Trả lời

dung la cac menu con cach thanh menu chinh 1 khoang hoi xa anh ah !!!!!

Admin
5/13/2011 09:48:00 CH Trả lời

Đó có thể do template, trước đây mình test trên template Game Blog thì không có hiện tượng này. Vâng để mình test lại ở một số template khác và tìm cách khắc phục lỗi thủ thuật này. Cảm ơn bạn!

5/26/2011 03:24:00 SA Trả lời

chán anh quá.anh chỉnh sửa nhanh lên nhé.hic idontnow

Admin
6/12/2011 06:39:00 SA Trả lời

Mình cần có thời gian bạn ah!

5/31/2012 08:40:00 SA Trả lời

Xem day : http://linkdownl.blogspot.com

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang