DỌC - dọc không thu gọn (11)

Menu dọc xổ xuống dạng thư mục từ JQuery cho blogspot

Fairstar | 02-01-2012 | nhận xét

Hôm nay namkna sẽ giới thiệu cho các bạn một mẫu menu dọc trượt dạng cây thư mục với hiệu ứng từ JQuery khá đẹp mắt. Bên cạnh hiệu ứng hover khá đẹp mắt khi dê chuột qua các sub menu con. Menu này rất thích hợp cho các blog về sách báo, tạp trí hay truyện,...

Menu nhìn khá đẹp tuy nhiên nếu blog của bạn nào đang gặp các vấn đề như load quá chậm thì nên cân nhắc kỹ trước khi dùng menu này bởi menu này sử dụng 2 file Javarscip.

Các bạn hãy xem Demo để thấy rõ hơn:

Demo for Post

Ảnh minh hoạ:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phần tử trang (Bố cục)

   4- Chọn Thêm Tiện ích => Tạo 1 widget HTML/Javarscrip và dán đoạn code bên dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/70549761/Menu/namkna-blogspot-com/ddaccordion.js">
</script>
<script type="text/javascript">

//Initialize Arrow Side Menu:
ddaccordion.init({
            headerclass: "menuheaders", //Shared CSS class name of headers group
            contentclass: "menucontents", //Shared CSS class name of contents group
            revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", 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: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
            oninit:function(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">

.arrowsidemenu{
            width: 250px; /*width of menu*/
            border-style: solid solid none solid;
            border-color: #94AA74;
            border-size: 1px;
            border-width: 1px;
}
           
.arrowsidemenu div a{ /*header bar links*/
            font: bold 12px Verdana, Arial, Helvetica, sans-serif;
            display: block;
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszM9bSOkLO8SnCvDmuOhmXhpOQtcM2WpLNccudXeB-E8ZNSD3-_nVGlEtAGPtUi_W1bkXtc9oY1a5suv599CUAtOTvaYQ2SJJA9QvTcDj3UBfC5FL34edcVl9_n8frT1lymFq-mHz7A1A/s1600/arrowgreen-namkna-blogspot-com.gif) 100% 0;
  height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            padding: 4px 0 4px 10px;
            line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            text-decoration: none;
}
           
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
            color: #26370A;
}

.arrowsidemenu div a:hover{
            background-position: 100% -32px;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
            color: #6F3700;
}

           
.arrowsidemenu div.selected a{ /*header that's currently selected*/
            color: blue;
            background-position: 100% -64px !important;
}

.arrowsidemenu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
}

.arrowsidemenu ul li{
            border-bottom: 1px solid #a1c67b;
}


.arrowsidemenu ul li a{ /*sub menu links*/
            display: block;
            font: normal 12px Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: black;
            padding: 5px 0;
            padding-left: 10px;
            border-left: 10px double #a1c67b;
}

.arrowsidemenu ul li a:hover{
            background: #d5e5c1;
}

</style>



<div class="arrowsidemenu">

<div><a href="#" title="Home">Home</a></div>
<div class="menuheaders"><a href="#" title="Mô tả 1">▼ Menu 1</a></div>
            <ul class="menucontents">
            <li><a href="#">Sub Menu 1.1</a></li>
            <li><a href="#">Sub Menu 1.2</a></li>
            <li><a href="#">Sub Menu 1.3</a></li>
            <li><a href="#">Sub Menu 1.4</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Mô tả 2">▼ Menu 2</a></div>
            <ul class="menucontents">
            <li><a href="#">Sub Menu 2.1</a></li>
            <li><a href="#">Sub Menu 2.2</a></li>
            <li><a href="#">Sub Menu 2.3</a></li>
            <li><a href="#">Sub Menu 2.4</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Mô tả 3">▼ Menu 3</a></div>
            <ul class="menucontents">
            <li><a href="#">Sub Menu 3.1</a></li>
            <li><a href="#">Sub Menu 3.2</a></li>
            <li><a href="#">Sub Menu 3.3</a></li>
            <li><a href="#">Sub Menu 3.4</a></li>
            <li><a href="#">Sub Menu 3.5</a></li>
            <li><a href="#">Sub Menu 3.6</a></li>
            </ul>
<!-- nếu muốn tạo thêm menu bạn chỉ cần copy đoạn code màu vàng bên trên dán vào đây -->
</div>

Trong đó:

• Thay dấu thăng (#) thành URL địa chỉ bài viết hoặc nhãn bạn muốn cho vào menu.
• Các chữ Menu 1 -3 là tên các menu chính
• Các chữ Sub Menu là tên các menu con.
• Nếu blog của bạn có file JQuery.min rồi thì xóa file JQuery.min bên trên đi.

Bạn hãy tải 2 file Js trên về và Upload lên hoaat riêng để sài: Các bạn cso thẻ dùng 2 host free làDropbox và google code.

Chúc thành công!