Tạo Menu xổ ngang Multi-Level Drop Down

Đây là một tiện ích rất đẹp nhìn hơi bị cool rất hợp với các blog có nhiều Label hoặc nhiều đường link nhưng lại chiếm rất ít không gian trong blog của bạn.

Bạn hoàn toàn có thể tùy chỉnh Tiện ích widget menu này để phù hợp với webblog bằng cách tùy chỉnh màu nền background, màu text color và số lượng tabs/links.
 


phattrien@so xin giới thiệu với các bạn cách thực hiện để có được menu như trên.
Trước tiên bạn log in vào Blogger, sau đó vào "Layout" -> "Edit HTML"
Tim tới đoạn mã dưới:

</head>

Dán ngay phía trên nó đoạn mã dưới :

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /*chiều rộng của Main Menu Item*/
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force has Layout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: black;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Chiều rộng Sub Menu Items */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background: url(http://www.gigaimage.com/images/5xeax6tzlovnvl7l3llz.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
//Via http://bloggerstop.net
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<!--Vertical-Menu-http://www.vnpressnet.com—>

Before you save the template, you may like to change the colored part of the code, so as to match your blog's template.
Save the template.
Now go to
"Layout" -> Click on "Add a Gadget" and select it as "HTML/JavaScript" type.
And paste this code in it:

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href=http://www.vnpressnet.com>vnpressnet</a></li>
</ul>
</div>

Chúc bạn thành công và có được một menu hữu dụng trên cho webblog của mình.
phattrien@so tổng hợp theo Dynamic Drive CSS Library Tags: Breakingnews, Header - Navigation, Khoi tao Blog