Menu dọc cho Web, blog [V2] - Menu thanh trái đẹp

Hôm nay mình chia sẻ tới các bạn 1 mẫu menu động khá đẹp dành cho Website, blog. Dạng menu này khá giống với site 24h.com.vn, dùng bên cột trái cho website, blog. Khi sử dụng menu này người truy cập không cần Click chuột thì cũng thấy được các danh mục con của mục chính. Menu này hiện tại khá được ưa chuộng cho Web blog có nhiều danh mục con, nhóm sản phẩm.

Xem thêm: Menu CSS sang phải động đẹp cho web blog V1

Demo trực tiếp:

• Home
• Folder 0
  • Sub Item 1.1
  • Sub Item 1.2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1

Code:


<style>
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
.ddsmoothmenu-v ul {
margin: 0;
padding: 0;
width: 250px;
/* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
position: relative;
}

.downarrowclass {
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass {
position: absolute;
top: 10px;
right: 5px;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a {
display: block;
overflow: auto;
/*force hasLayout in IE7 */
height: 32px;
color: white;
text-decoration: none;
padding: 5px 5px 5px 25px;
border-bottom: 0px solid #778;
border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLDz6ygzPzdq8J1RGUC2nToL90zisCvh3ipse8iaJHQhdoZ8M4k5A9NYeOWLb_faFNcKqJadgW_QASySDSDd6cftZpuUzh2gax5kZ7Oa8wbEW2gSBJMTY7hPp1-7e_UZE83w5uTsrSB8/s1600/tab_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyE2WGjJ-VwGvNpDCsX09_C0NPbDWCg-dSVf6YvjHNijhIlHlX7FBPCmoXfxQk3Rh86SRHGAT5wt68x3LqYizggNXmzNPppCbOLtpn1Ladjop6MknX5kDFk-i4s4MU8_7pLwwndax3N0/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyE2WGjJ-VwGvNpDCsX09_C0NPbDWCg-dSVf6YvjHNijhIlHlX7FBPCmoXfxQk3Rh86SRHGAT5wt68x3LqYizggNXmzNPppCbOLtpn1Ladjop6MknX5kDFk-i4s4MU8_7pLwwndax3N0/s1600/tabhover_bg.gif);
height: 22px;
background-repeat: repeat-x;
background-position: left center;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul {
position: absolute;
width: 170px;
/*Sub Menu Items width */
height: 22px;
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
float: left;
height: 1%;
}

* html .ddsmoothmenu-v ul li a {
height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
})
</script>
<script type="text/javascript">
ddsmoothmenu.init({

mainmenuid: "smoothmenu2",
//Menu DIV id
orientation: 'v',
//Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v',
//class added to menu's outer DIV

//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li>
<a href="http://www.helperblogger.com/">Home</a>
</li>
<li>
<a href="#">Folder 0</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Folder 1</a>
<ul>
<li>
<a href="#">Sub Item 1.1</a>
</li>
<li>
<a href="#">Sub Item 1.2</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Folder 2</a>
<ul>
<li>
<a href="#">Sub Item 2.1</a>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>

- Hưởng dẫn thủ thuật thêm menu này cho Blogspot:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm 1 tiện ích (Add a Widget) -> HTML/ Javascript
2. Dán code trên sau đó lưu lại xem kết quả. ^^