Hôm nay mình đã xin chia sẻ cùng các bạn một dạng menu dành cho Blogspot 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. Bạn có thể xem hình ảnh minh họa và phần LIVE DEMO dưới đây để thấy rỏ hơn hiệu ứng của menu này.
» 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*/
}
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 trang chủ" class="mainlevel-trans" id="menu1"><span>MENU 1</span></a></li><li><a href="URL link 1" class="havechild-mainlevel-active-trans" id="menu2"><span>MENU 2</span></a></li><li><a href="URL link 2" 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 4" class="havechild-mainlevel-trans" id="menu5"><span>MENU 5</span></a></li><li><a href="URL link 5" class="mainlevel-trans" id="menu6"><span>MENU 6</span></a></li><li><a href="URL link 6" class="havechild-mainlevel-trans" id="menu7"><span>MENU 7</span></a></li><li><a href="URL link 7" 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>
- Phần màu Hồng 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 Đỏ là tên các thư mục con cấp 1 và phần màu Xanh đọt chuối 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 các bạn thành công!!!
0 nhận xét:
Đăng nhận xét
Đây là Blog cộng đồng, có thể trao đổi và học hỏi vì vậy mọi nhận xét các bạn nên dùng những từ dễ nghe, không nên dùng những lời tục tiểu thiếu văn hóa.Cám ơn các bạn.