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.
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...
.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/AVvXsEinsb-2Y-GYOQ20B7ysyglu9SkGgvzYuV8rTRgQjhadgP8W0gYDnSZ7w_ya3CBjETLBqAzpNOYEpJsT2r2OKkVFFkI2pEZbL5ZQPMjA5y9CnTXAvDAvVZMQQp8XPcDb3rhHjLkyqQMI5iNZ/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>
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>
<li><a href="#">Tên menu cuối</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>
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>
Post a Comment Blogger Facebook
Bấm vào hình để nhận code!
Một lời nói triệu niềm vui. Hãy cho mọi người biết suy nghĩ của bạn!