MENU DỌC XỔ XUỐNG CÁC MENU CON (KIỂU 3)

Tương tự kiểu 1 và kiểu 2, menu dọc này cũng xổ dọc xuống các menu con khi bạn bấm chuột vào menu chính nhưng đặc biệt hơn ở chỗ là khi bạn đang xem menu nào thì menu đó sẽ có màu khác (màu đỏ) tất cả menu còn lại sẽ có màu đen...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

 

CODE:

<script type="text/javascript" 
src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">
</script>
<script type="text/javascript">
ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
  
  revealtype: "click", //Reveal content when user clicks or onmouseover 
the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
  
  toggleclass: ["", "openheader"], //Two CSS classes to be applied to 
the header when it's collapsed and expanded, respectively ["class1", 
"class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added
 to the header when it's collapsed and expanded, respectively  
["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 220px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background:
 black 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZShRZWrMLcSixYCOIV4vbC9_TlmIJk4mIuSXBmNKdHj2uvB7jCHcaXhtZxRc5-v3oqw5w2LqsCJwu_413CXrx0aFrQR0okiIQfpggBg869_18P5xKcBowsQGL3bL-5kdrZufYFHet3Ap/s1600/titlebar.png)
 repeat-x center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuk8DOoMhNKB0eeze6sHLerQa5pAzi9ZFpaYJPlOiIfa3cdeUBsy_I1t2DKGk7xsaXdYJ9nn3EgZAxWK1ELM9SsuBCO-db1FVp4HZ4KSM1wILpvY5loF87gJl3-rwEVX5ZcmFZP8URSAmP/s1600/titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDI0AgqMDLFcvY7G563q_dn7W0Oo_hkyK-S5eqoZIq7yLokotZijmwTRI-tgE6Oihn5xP9NP_5mcXDZUDSimVzXhGlzDnnDqZz3vJ6h6nEs6RfIKC2zipoldVzlyUdEQBaPJ84aVQyjgdd/s1600/arrowbullet.png)
 no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>


<div class="arrowlistmenu">

<h3 class="menuheader expandable">☆Tên menu chính 1</h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
    <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
<li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên meun chính 2</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
        <li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên menu chính 3</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>

<h3 class="menuheader expandable">☆Tên menu chính 4</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>
</div>

 

Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu muốn thêm menu phụ thì bạn copy đoạn code này:

<li><a href="#">Tên menu con </a></li>

Dán tiếp trên dòng lệnh </ul> của mỗi menu chính mà mình muốn thêm.

Còn muốn thêm một menu chính thì bạn copy đoạn code này:

   <h3 class="menuheader expandable">☆Tên menu chính </h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
     <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
</ul>

Dán trên thẻ </div> cuối cùng.

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