Menu dọc xổ ngang cực đẹp cho blogspot
Cập nhật:
13 thg 4, 2015
tháng 4 13, 2015
<style type='text/css'>
/* Độ rộng của menu chính cấp 1 */
.sidebarmenu ul{margin:0;padding:0px;list-style-type: none;width: 100%;}
/* Lên cấp độ liên kết trình đơn phong cách */
.sidebarmenu ul li{position:relative;}
.sidebarmenu ul li a{display:block;overflow:auto;color: #0c9706;text-decoration: none;padding:10px;border-bottom-color: #E0E0E0;}
/* Màu nền của tab */
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
padding: 10px;
background-color: #f7f7f7;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 1px;
border-right-color: #E0E0E0;
border-right-style: solid;
border-right-width: 1px;
}
.sidebarmenu ul li a:visited{color:#0c9706;}
.sidebarmenu ul li a:hover{background-color:#EAEAEA;}
/* menu con cấp 2,3 */
.sidebarmenu ul li ul{ position: absolute;width: 100%;top: 0;visibility: hidden;}
.sidebarmenu a.subfolderstyle{
background: url(http://1.bp.blogspot.com/-Dnx2NMUc_VA/UaoeKUU5oQI/AAAAAAAADNc/8ysOZjddVls/s1600/xo+xuong+blogger.gif) no-repeat 97% 50%;}
</style>
Copy đoạn code bên dưới dán vào nơi bạn muốn hiển thị.
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="/">Trang chủ</a></li>
<li><a href="#">Giới thiệu</a>
<ul>
<li><a href="#">Tổ chức</a></li>
<li><a href="#">Cơ sở vật chất</a></li>
<li><a href="/p/lien-he.html">Liên hệ</a></li>
</ul>
</li>
<li><a href="#">Tuyển sinh & Đào tạo</a>
<ul>
<li><a href="/2015/04/gioi-thieu-nghe-xu-ly-nuoc-thai.html">Nghề xử lý nước thải</a></li>
<li><a href="/2015/04/nghe-bao-ho-lao-ong.html">Nghề bảo hộ lao động</a></li>
<li><a href="/2015/04/nghe-quan-ly-moi-truong-o-thi.html">Nghề quản lý môi trường đô thị</a></li>
<li><a href="#">Thời khóa biểu</a></li>
<li><a href="#">Quy trình tuyển sinh</a></li>
<li><a href="#">Quy trình đào tạo</a></li>
<li><a href="#">Liên thông đại học</a></li>
<li><a href="#">Học bổng và phần thưởng</a></li>
<li><a href="#">Thông báo</a></li>
</ul>
</li>
<li><a href="#">Nghiên cứu & HTQT</a>
<ul>
<li><a href="#">Nghiên cứu của giáo viên</a></li>
<li><a href="#">Nghiên cứu của sinh viên</a></li>
<li><a href="#">Dự án GOPA</a></li>
<li><a href="#">Ý tưởng, sáng kiến</a></li>
</ul>
</li>
<li><a href="#">Trung tâm & CLB</a>
<ul>
<li><a href="#">Trung tâm vận hành & bảo dưỡng HTXLNT</a></li>
<li><a href="#">CLB Môi trường</a></li>
<li><a href="#">CLB Tiếng anh</a></li>
<li><a href="/search/label/Th%C3%B4ng%20tin%20vi%E1%BB%87c%20l%C3%A0m">Thông tin việc làm</a></li>
</ul>
</li>
<li><a href="/search/label/Hình%20ảnh%20hoạt%20động">Hình ảnh hoạt động</a>
<ul>
<li><a href="/search/label/Lý%20thuyết">Lý thuyết</a></li>
<li><a href="/search/label/Thực%20hành">Thực hành</a></li>
<li><a href="/search/label/Thực%20tập">Thực tập</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menuids=["sidebarmenu1"] //wapgialai.blogspot.com
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--){ //wapgialai.blogspot.com
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>
