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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

7 nhận xét

  1. 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.

    Trả lờiXóa
  2. dung la cac menu con cach thanh menu chinh 1 khoang hoi xa anh ah !!!!!

    Trả lờiXóa
  3. Đó 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!

    Trả lờiXóa
  4. chán anh quá.anh chỉnh sửa nhanh lên nhé.hic idontnow

    Trả lờiXóa
  5. Xem day : http://linkdownl.blogspot.com

    Trả lờiXóa