▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU DỌC XỔ XUỐNG NHIỀU CẤP

Với thủ thuật dưới đây, trên blog của bạn sẽ có một menu dọc khá đặc biệt, đó là khi bạn rê chuột vào một menu bất kỳ thì nó sẽ xổ ra một số menu con nhiều cấp nữa.
Bạn có thể làm menu con cấp 2, cấp 3...tuỳ thuộc vào link liên kết nhiều hay ít.
Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 
Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về) không áp dụng cho các giao diện mặc định của Blogspot...




Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía 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; /*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: 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/AVvXsEh5vQM8GXk66qAS8icoKCcu6nuu_uA-oQJc3TGdeevaOzjR-1s1yvSKbeCykLQDFxDKMYHjzhQwRD6pVYNEWpRj55fdpewXJBoj1SMGOGUQv7vP88E5ii_PjsXUw-wCU4QgwluFYItq3zw4/s1600/right.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="#">Tên menu cấp 1</a></li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>

  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li> 
    </ul>
  </li>


  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
</ul>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</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>

  <li><a href="#">Tên menu cấp 2</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>


  <li><a href="#">Tên menu cấp 2</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><a href="#">Tên menu cuối</a></li>

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


Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chỉ có một cấp thì copy dòng code này.
<li><a href="#">Tên menu cấp 1</a></li>

Dán phía trên dòng lệnh
<li><a href="#">Tên menu cuối</a></li>


* Muốn thêm 1 menu có 2 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>

Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>


* Muốn thêm 1 menu có 3 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</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>
Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>


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


▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

11 nhận xét:

Ngạo Thiên Anh nói...

anh Dũng có thể chỉ cho em là dán vào phần nào được ko ạ? Cảm ơn anh nhiều ^^

dunghennessy nói...

Em thêm tiện ích HTML rồi dán code vào và bấm Lưu là xong

Admin nói...

Anh ơi, cái này chỉ áp dụng bên trái, làm sao để có thể áp dụng cho bên phải hả anh???
Nhờ anh chỉ giúp, cảm ơn anh.

dunghennessy nói...

Ok, để anh nghiên cứu xem sao nha....Có kết quả thì Anh sẽ báo cho em!!!!

Unknown nói...

sao cái này em copy về chạy demo thì ok. nhưng sao past vào bài thì nó chỉ hiện ra thanh menu cấp 1( rê chuột vào nó ko hiện ra thanh cấp 2-3 để chọn).
Vậy là trong bài của em có lỗi gì nhỉ ??

dunghennessy nói...

Vấn đề của em nêu bị lỗi do 3 trường hợp:
1/ Code này xung đột với một code nào đó đang hiển thị trên Blog của em.
2/ Hoặc là do giao diện của em đang sử dụng là một hình nền nằm phía dưới nên khi rê chuột vào các menu con sẽ bị ẩn phía dưới vì vậy em sẽ không thấy nó.
3/ Chép code còn thiếu, thử chép và dán lại xem sau

Unknown nói...

Có thể dùng team giúp em chỉnh cái menu này 1 xíu không ah

Unknown nói...

Nếu muốn đổ xuống 2 cấp thôi thì sửa chỗ nào hả bạn ? Mình xóa bớt tên menu cấp 3 -----> 2 cấp nhưng không được.

Unknown nói...

Tên menu cấp 1

Tên menu cấp 2

Tên menu cấp 2

Read more: MENU DỌC XỔ XUỐNG NHIỀU CẤP | dunghennessy Under Creative Commons License: Attribution Share Alike

Cheap Offers: http://bit.ly/gadgets_cheap

hoanpro nói...

mình đg cần thiết kế 1 giao diện chuẩn.a e nào nhận làm thì liên hệ nhe 0937358593

Lâm Phước Lộc nói...

rât cảm ơn bạn, bài viết rât hữu ích với mình, mình đã tự viết hàm cho show menu n cấp theo db của minh, chỉ cần dán css của bạn vào là ok

Đăng nhận xét

 
Powered by by: Blogger