Menu CSS đa cấp động bên phải cho Web, blog

Loading...

Website, blog của bạn có nhiều thư mục, nhiều nhóm con. Bạn muốn thiết kế Menu gọn và đẹp hơn Ở bài viết này mình giới thiệu tới các bạn mẫu menu CSS đa cấp động xổ xuống bên phải. Dạng menu CSS này các bạn có thể bắt gặp ở nhiều site khác nhau. Hiện tại thì site 24h.com.vn cũng sử dụng dạng menu này nhưng Code thì mình không biết có giống nhau không nữa.
Đây là một cái nhìn thực đơn đơn giản nhưng chuyên nghiệp bên cạnh trình đơn đa cấp. Nó chỉ là một thường xuyên danh sách UL lồng nhau, biến thành một trình đơn thả xuống bằng cách sử dụng một mã JavaScript rất nhỏ. Lưu ý rằng nền của trình đơn phải là một màu đặc thay vì có một hình nền, như tài sản sau đó được dành riêng để hiển thị hình ảnh mũi tên bên phải xuất hiện bên cạnh các mục menu với các menu bổ sung phụ.
DEMO:

• Item 1
• Item 2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1
  • Folder 2.1
    • Sub Item 2.1.1
    • Sub Item 2.1.2
    • Sub Item 2.1.3
    • Sub Item 2.1.4
• Item 4

Hình ảnh Right:  
Để làm được menu này chúng ta có 2 đoạn Code: Gồm CSS + Javascript và HTML.
CODE CSS + Javascript:
<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout 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; /*Sub Menu Items width */
top: 0;
visibility: hidden;
} .sidebarmenu a.subfolderstyle{
background: url(http://3.bp.blogspot.com/-dhDlyqLbpu0/UUXxh8zDqbI/AAAAAAAACaY/9ELumeui5gE/s1600/right.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">
//huong dan http://itviet360.com
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>
CODE HTML: <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="#">Item 4</a></li>
</ul>
</div>

- Hướng dẫn sử dụng cho Blogger
Trên Blogger các bạn tạo 1 Widget HTML/Javascript và dán lần lượt code CSS + Javascipt và HTML

---

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

Loading...

Chuyên mục: html-css, javascript, Source code, Thu thuat blogspot, thu-thuat-blogger