Tạo menu nhiều cấp (Multiple Level Menus) với hiệu ứng Drop down

(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>

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