Menu dọc xổ xuống dạng thư mục

Hôm nay Karl sẽ giới thiệu cho các bạn một mẫu menu dọc đẹo dành cho việc thiết kế blog. Menu này có đặc điểm trượt từ trên xuống, hết hợp hiệu ứng hover khi dê chuột. Điểm khác biệt là menu sử dụng 2 button để ẩn hiện các sub menu. 







Và đây là hình demo:

☼ Cách tiến hành:

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

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sửa HTML

4- Dán đoạn code sau vào trước thẻ đóng   ]]></b:skin>.

.button {border:1px solid #055;border-radius:3px;box-shadow:0 1px rgba(255,255,255,0.3) inset;background:#41A317;color:#FFFF00 !important;text-decoration:none !important}
a.button:hover,.submit.button:hover{border:1px solid #222;background:#810541}
.button.medium{padding:5px 10px;font-size:12px}
.button.big{padding:10px 20px;font-size:14px}
div.sdmenu {
 width: 200px;
 font-family: Arial, sans-serif;
 font-size: 12px;
 padding-bottom: 10px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYBiRSiaq3uShuIEYN3sp5oOIDEnV3rJa4Uw5yJpNWJR3izUkwSWFHEie57sXhKZks9gphATTehEIkgmzyePQXOxGXwhSeCfWn_LTGw43mv_euOKHcS13ZFjk8FB78Z8jQv7cuWQ3fA/s512/bottom-menu-doc-vinacer.gif) no-repeat  right bottom;
 color: #fff;
}
div.sdmenu div {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSjRYCU6HIuFOXho3nn4VemMoUhzqrWJcIbMKKwmRbMlt3MLodKPRvN7OorOEG6PVHVzski_noUhINIQoOFNrJH1699QpUK0iOVYz3WJGv8XbePHeuyzGNHRAK5qVAPX2XZBW6dwE8w/s512/menu-vinacer-dot-blogspot-dot-com.gif) repeat-x;
 overflow: hidden;
}
div.sdmenu div:first-child {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSjRYCU6HIuFOXho3nn4VemMoUhzqrWJcIbMKKwmRbMlt3MLodKPRvN7OorOEG6PVHVzski_noUhINIQoOFNrJH1699QpUK0iOVYz3WJGv8XbePHeuyzGNHRAK5qVAPX2XZBW6dwE8w/s512/menu-vinacer-dot-blogspot-dot-com.gif) no-repeat;
}
div.sdmenu div.collapsed {
 height: 30px;
}
div.sdmenu div span {
 display: block;
 padding: 8px 30px;
 font-weight: bold;
 color: white;
 background: url(expanded.gif) no-repeat 10px center;
 cursor: default;
 border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
 background-image: url(collapsed.gif);
}
div.sdmenu div a {
 padding: 8px 30px;
 background: #eee;
 display: block;
 border-bottom: 1px solid #ddd;
 color: #066;
}
div.sdmenu div a.current {
 background : #ccc;
}
div.sdmenu div a:hover {
 background : #066 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSjRYCU6HIuFOXho3nn4VemMoUhzqrWJcIbMKKwmRbMlt3MLodKPRvN7OorOEG6PVHVzski_noUhINIQoOFNrJH1699QpUK0iOVYz3WJGv8XbePHeuyzGNHRAK5qVAPX2XZBW6dwE8w/s512/menu-vinacer-dot-blogspot-dot-com.gif) 0 -32px;
 color: #fff;
 text-decoration: none;
}

     5-  Bấm Lưu Mẫu  (save template) lại.

    6. Tạo một widget HTML/Javarscip và dán đoạn code sau vào:

<script type="text/javascript" src="http://code-pro.googlecode.com/files/sdmenu.js"></script>
<script type="text/javascript">
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
<input class="submit button medium" type="button" value="Hiện Menu" onclick="myMenu.expandAll()" />
<input class="submit button medium" type="button" value="Rút gọn menu" onclick="myMenu.collapseAll()" />
</form>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
    <span>Menu 1</span>
        <a href="#">Sub Menu 1.1</a>
        <a href="#">Sub Menu 1.2</a>
        <a href="#">Sub Menu 1.3</a>
        <a href="#">Sub Menu 1.4</a>
        <a href="#">Sub Menu 1.5</a>
</div>
<div>
   <span>Menu 2</span>
        <a href="#">Sub Menu 2.1</a>
        <a href="#">Sub Menu 2.2</a>
        <a href="#">Sub Menu 2.3</a>
        <a href="#">Sub Menu 2.4</a>
</div>
<div class="collapsed">
   <span>Menu 3</span>
        <a href="#">Sub Menu 3.1</a>
        <a href="#">Sub Menu 3.2</a>
        <a href="#">Sub Menu 3.3</a>
        <a href="#">Sub Menu 3.4</a>
        <a href="#">Sub Menu 3.5</a>
        <a href="#">Sub Menu 3.6</a>
</div>
<div>
    <span>Menu 4</span>
        <a href="#">Sub Menu 4.1</a>
        <a href="#">Sub Menu 4.2</a>
        <a href="#">Sub Menu 4.3</a>
        <a href="#">Sub Menu 4.4</a>
        <a href="#">Sub Menu 4.5</a>
</div>
    </div>

Trong đo:

• Thay các dấu thăng màu đỏ thành URL (địa chỉ) liên kết tới bài viết, nhãn, trang của bạn.
• Thay các phần màu xanh thành tên của các bài viết, nhãn, trang của bạn/
• Bạn hãy tải file sdmenu.js và Upload lên Google code hoặc Dropbox để sử dụng lâu dài.

   5-  Bấm Lưu   (save Widget) lại.

- Ở trên mình dùng file ảnh làm background bạn cũng có thể thay thành các hình ảnh của bạn. Nếu không muốn dùng ảnh bạn có thể xóa các file ảnh đó đi.

 Chúc thành công!