humghn.com

Các bạn đã biết rằng một blog/site đẹp thì nội dung cần phải tối ưu , trang chủ cần phải bao quát , gọn gàng nhưng vẫn trực quan và dễ sử dụng . Để đạt được điều đó thì tính năng tạo menu dọc xổ nhiều cấp là rất quan trọng . Hiểu được điều đó , trong bài viết lần này , chuyên mục sẽ hướng dẫn chi tiết các bạn cách để thực hiện chèn menu xổ dọc nhiều cấp cho blogspot .

Menu dọc xổ nhiều cấp

DEMO

Chú ý : Các bạn xem demo bằng cách copy code có sẵn bên dưới vào ô thử code sau đây , rồi nhấp vào "xem trước "

Nhập mã cần thử

Cách thực hiện
Bước 1 : Đăng nhập vào blogspot , sau đó vào " Bố cục " và thêm tiện ích " HTML/JavaScript "
Bước 2 : Dán trực tiếp đoạn mã sau và tiện ích HTML/JavaScript vừa tạo

<style type="text/css">.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;width: 200px; /* Độ rộng của menu chính cấp 1 */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{margin-top: 0px;/*Khoảng cách giữa các menu*/
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; /* Màu nền của tab (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: 250px; /* Độ rộng của menu con cấp 2 và 3 */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZhT7oHcoJgDYLo8RO5-L9lo49itYbF30C-paolygPD_F1l1_sQ7z7HibZQIFN3CaKv6NybhuxLeQl6og5F2Acw3sv5gj0Mn8DZJQwAI8RLXJQ-wrYLn4J5ap72GuUlRndm_xowVYNplV/h120/right-namkna-blogspot-com.gif) no-repeat 97% 50%;
}


</style>

<script type="text/javascript">


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>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.2</a></li>
  </ul>
</li>

<li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Sub Item 3.1</a>
<ul>
    <li><a href="#">Sub menu 3.1.1</a></li>
    <li><a href="#">Sub menu 3.1.2</a></li>
    <li><a href="#">Sub menu 3.1.3</a></li>
    <li><a href="#">Sub menu 3.1.4</a></li>
    </ul>
  </li>

  <li><a href="#">Sub menu 3.2</a>
<ul>
    <li><a href="#">Sub menu 3.2.1</a></li>
    <li><a href="#">Sub menu 3.2.2</a></li>
    <li><a href="#">Sub menu 3.2.3</a></li> 
    </ul>
  </li>


  <li><a href="#">Sub Item 3.3</a>
    <ul>
    <li><a href="#">Sub Item 3.3.1</a></li>
    <li><a href="#">Sub Item 3.3.2</a></li>
    <li><a href="#">Sub Item 3.3.3</a></li>
    <li><a href="#">Sub Item 3.3.4</a></li>
    </ul>
  </li>
</ul>

<li><a href="#">Menu 4</a>
  <ul>
  <li><a href="#">Sub Item 4.1</a>
<ul>
    <li><a href="#">Sub Item 4.1.1</a></li>
    <li><a href="#">Sub Item 4.1.2</a></li>
    <li><a href="#">Sub Item 4.1.3</a></li>
    <li><a href="#">Sub Item 4.1.4</a></li>
    </ul>
  </li>

  <li><a href="#">Sub Item 4.3</a>
<ul>
    <li><a href="#">Sub Item 4.2.1</a></li>
    <li><a href="#">Sub Item 4.2.2</a></li>
    <li><a href="#">Sub Item 4.2.3</a></li>
    <li><a href="#">Sub Item 4.2.4</a></li>
    </ul>
  </li>


  <li><a href="#">Sub Item 4.3</a>
    <ul>
    <li><a href="#">Sub Item 4.3.1</a></li>
    <li><a href="#">Sub Item 4.3.2</a></li>
    <li><a href="#">Sub Item 4.3.3</a></li>
    <li><a href="#">Sub Item 4.3.4</a></li>
    </ul>
  </li>
</ul>

<li><a href="#">Menu End</a></li>

</li></li></ul></div>

Những đoạn code được bôi xanh là những code có thể tùy chỉnh tùy theo ý muốn . Ngoài ra , các bạn cũng có thể tùy chỉnh các mã màu của thanh menu thông qua việc thay thế mã màu bằng các mã màu khác trong bảng mã màu HTML tại đây
Chúc các bạn thành công !

Website liên kết

Xem nhiều nhất

Cách tạo menu dọc xổ nhiều cấp cho blogspot

humghn.com

Kiếm Tiền Với Google Adsense