Drop Menu - Thủ thuật tạo Drop Menu dọc xổ ngang cho Blogger

Nhằm làm tăng thêm bộ sưu tầm các mẫu menu cho blog nên Team Blogger sẽ giới thiệu thêm cho các bạn một mẫu menu dọc xổ ngang khá đẹp Menu có thể xổ dọc đến 3 cấp, Mẫu này rất thích hợp cho các bạn không thích sử dụng menu ngang.

>>Search Box - Thủ thuật tạo hộp tìm kiếm cho Blogger

>>Random Posts - Thủ thuật bài viết ngẫu nhiên cho Blogger Version 1

>>Ẩn / Hiện Widget - Thủ thuật Ẩn / Hiện Widget trong Blogger

>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger

>>Recent Posts & Recent Comments - Thủ thuật tạo bài viết và bình luận mới nhất

>>Hình ảnh - Thủ thuật cho Logo chạy ngang trong Website/Blogger

>>Translate - Thủ thuật tự động dịch 10 ngôn ngữ cho Blogger/Website

>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
>>Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
>>Back To Top - Thủ thuật nút lên đầu trang trong Blogger

Drop Menu - Thủ thuật tạo Drop Menu dọc xổ ngang cho Blogger

1- Đăng nhập vào Blogger hoặc blogspot2- Vào thiết kế (Mẫu)3- Chọn Phần tử trang4- Tạo một HTML/Javarscipt và dán đoạn code bên dưới và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{
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(http://1.bp.blogspot.com/-Dnx2NMUc_VA/UaoeKUU5oQI/AAAAAAAADNc/8ysOZjddVls/s1600/xo+xuong+blogger.gif) no-repeat 97% 50%;
}
</style>
<script type="text/javascript">
var menuids=["sidebarmenu1"] //ThietKeBlogger.Net
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--){ //ThietKeBlogger.Net
  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>

5 - Cuối cùng là thay các trường cho hợp lý theo ý bạn và bấm Lưu   (save Widget) lại.

Drop Menu - Thủ thuật tạo Drop Menu dọc xổ ngang cho Blogger

Đăng nhận xét

Popular Post

Artikel Terbaru

Artikel Rekomendasi

Artikel Blageziner