Mẫu menu dọc xổ ngang cực đẹp nhé cho blogger/blogspot

Tweet

[tintuc]

Mẫu menu dọc xổ ngang cực đẹp nhé, phân nhiều cấp, bạn có thể xem demo ngay trên http://www.hacbayit.com




Bạn có thể tinh chỉnh lại màu của nó nhé
Thực hiện: (đưa vào tiện ích)

1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :

<style type="text/css">.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 14px Arial;width: 135px;margin-left: -10px;position: absolute;z-index: 99998;}.sidebarmenu ul li{position: relative;}.subfolderstyle {color: #F4B2BF;}.sidebarmenu ul li a{display: block;overflow: auto;text-decoration: none;padding: 6px 5px 5px 10px;border-bottom: 1px solid #911E3F;font: bold 13px arial;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #850629;}.sidebarmenu ul li a:visited{color: #F4B2BF;}.sidebarmenu ul li a:hover{background:#E41650}/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;z-index: 99998;width: 160px; /* Độ 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/AVvXsEihSagzO4E_AFXauqmmz3zmV1YSIOxchtqSTucq24ERqPy3h9S0IifVw9twF2773LUoullCfl0kSqIuXEYumaR3Z2l8Ogq0161TnKRX4_8bf0q5vIE2etDEpJ7vIILU53nKjXgXzrmxmFHF/s22/cong%2520tac%2520vien.png) 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="/search/label/Bảo%20mật">Bảo mật</a> <ul> <li><a href="/search/label/Diệt%20Virus">Diệt Virus</a></li> <li><a href="/search/label/Dữ%20liệu%20-%20File">Dữ liệu - File</a></li> </ul></li><li><a href="#">Đồ họa</a> <ul> <li><a href="/search/label/Photoshop%20và%20Đồ%20họa">Photoshop</a></li> <li><a href="/search/label/Đồ%20họa%20kỹ%20thuật">Core Draw</a></li> <li><a href="/search/label/Đồ%20họa%20kỹ%20thuật">AutoCard</a></li> <li><a href="/search/label/Đồ%20họa%20kỹ%20thuật">3D Max</a></li> </ul> </li> <li><a href="#">Phần mềm</a><ul> <li><a href="/search/label/Ứng%20dụng%20văn%20phòng">Văn phòng</a></li> <li><a href="/search/label/Đồ%20họa%20kỹ%20thuật">Làm phim</a></li> <li><a href="/search/label/Media">MultiMedia</a></li> <li><a href="/search/label/Flash">Flash</a></li> </ul> </li> <li><a href="#">Nhật ký</a> <ul> <li><a href="/search/ll/Nhật%20ký%20của%20tôi">Tâm sự</a></li> <li><a href="#">Nhật ký bạn bè</a></li> <li><a href="#">Góc Teen</a></li> <li><a href="#">Dân IT</a></li> </ul> </li><li><a href="#">Lập trình</a> <ul> <li><a href="/search/label/Thủ%20thuật%20Blogspot">Blogspot</a></li> <li><a href="#">Joomla</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Mã nguồn VBB</a></li> <li><a href="#">Ngôn ngữ ASP</a></li> <li><a href="#">Ngôn ngữ C++</a></li> </ul> </li>
<li><a href="#">Mạng máy tính</a><ul> <li><a href="/search/label/Internet%20và%20E-mail">Internet - Mail</a></li> <li><a href="/search/label/Drivers">Drivers</a></li> <li><a href="/search/label/Hệ%20thống">Hệ thống</a></li> </ul> </li> <li><a href="#">Thủ thuật</a> <ul> <li><a href="/search/label/Thủ%20thuật%20CNTT">Máy tính</a></li> <li><a href="/search/label/Thủ%20thuật%20Facebook">Facebook</a></li> </ul> </li><li><a href="#">Giáo trình</a> <ul> <li><a href="#">Công nghệ thông tin</a><ul> <li><a href="#">Môn Đồ họa</a></li> <li><a href="#">Môn Lập trình</a></li> <li><a href="#">Quản trị mạng</a></li> <li><a href="#">Phần mềm</a></li> <li><a href="#">Phần cứng</a></li> </ul></li><li><a href="#">Tài chính NH</a></li><li><a href="#">Kế toán</a></li><li><a href="#">Kiến trúc</a></li><li><a href="#">Sư phạm</a></li></ul></li><li><a href="#">Tin tức</a> <ul> <li><a href="/search/label/Cuộc%20sống%20xã%20hội">Xã hội</a></li> <li><a href="#">Thể thao</a></li> </ul> </li></ul></div>

[/tintuc]