Nhằm làm tăng thêm bộ sưu tầm các mẫu menu cho blog nên hôm nay namkna sẽ giới thiệu thêm cho các bạn một mẫu menu dọc xổ ngang khá đẹp Menu có thể xổ dọc đến 3 cấp, Mẫu này rất thích hợp cho các bạn không thích sử dụng menu ngang.
Các bạn có thể xem Demo để thấy rõ hơn về menu này:Ảnh minh họa:
☼ Cách thêm menu dọc xổ ngang nhiều cấp cho blogspot:
2- Vào thiết kế (Mẫu)
3- Chọn Phần tử trang
4- Tạo một HTML/Javarscipt và dán đoạn code bên dưới vào:
<style type="text/css">.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{margin-top: 0px; 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; /* Màu nền của tab (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/AVvXsEi8jwpCTVkcoPzyCZZbVCyq0UAd3gnnctkR3ckjCt0FrhDJXi4Z7Y-Ds9hE8hm_Xp62aThGlASemSh_gZCSkvszvnqJ7wpeVeaVWF0WBKIbRHBUoF8s3NGW9zylUW2OF6PhQN3QDSyL4abH/h120/right-namkna-blogspot-com.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="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Sub Item 3.1</a> <ul> <li><a href="#">Sub menu 3.1.1</a></li> <li><a href="#">Sub menu 3.1.2</a></li> <li><a href="#">Sub menu 3.1.3</a></li> <li><a href="#">Sub menu 3.1.4</a></li> </ul> </li> <li><a href="#">Sub menu 3.2</a> <ul> <li><a href="#">Sub menu 3.2.1</a></li> <li><a href="#">Sub menu 3.2.2</a></li> <li><a href="#">Sub menu 3.2.3</a></li> </ul> </li> <li><a href="#">Sub Item 3.3</a> <ul> <li><a href="#">Sub Item 3.3.1</a></li> <li><a href="#">Sub Item 3.3.2</a></li> <li><a href="#">Sub Item 3.3.3</a></li> <li><a href="#">Sub Item 3.3.4</a></li> </ul> </li> </ul> <li><a href="#">Menu 4</a> <ul> <li><a href="#">Sub Item 4.1</a> <ul> <li><a href="#">Sub Item 4.1.1</a></li> <li><a href="#">Sub Item 4.1.2</a></li> <li><a href="#">Sub Item 4.1.3</a></li> <li><a href="#">Sub Item 4.1.4</a></li> </ul> </li> <li><a href="#">Sub Item 4.3</a> <ul> <li><a href="#">Sub Item 4.2.1</a></li> <li><a href="#">Sub Item 4.2.2</a></li> <li><a href="#">Sub Item 4.2.3</a></li> <li><a href="#">Sub Item 4.2.4</a></li> </ul> </li> <li><a href="#">Sub Item 4.3</a> <ul> <li><a href="#">Sub Item 4.3.1</a></li> <li><a href="#">Sub Item 4.3.2</a></li> <li><a href="#">Sub Item 4.3.3</a></li> <li><a href="#">Sub Item 4.3.4</a></li> </ul> </li> </ul> <li><a href="#">Menu End</a></li> </li></li></ul></div>5- Bấm Lưu (save Widget) lại.
☼ Tùy chỉnh menu dọc xổ ngang nhiều cấp:
1. Thay thế tiêu đề và liên kết.- Thay các dấu thăng (#) màu đỏ và cam thành liên kết tới các bài viết, trang hoặc nhãn của bạn.
- Thay các tiêu đề màu xanh thành thên các bài viết, trang hoặc nhãn tương ứng của bạn.
- Khi đó bạn sẽ được như đoạn code bên dưới:
<li><a href="http://namkna.blogspot.com/search/label/Blogspot-tips">Thủ thuật blogspot</a></li>
2. Nếu chèn vào blog gặp phải lỗi các tab menu cách nhau một khoảng như hình dưới:
=> Khắc phục: Hãy sửa thuộc tính margin-top: 0px;. Có thể dùng số âm ví dụ: margin-top: -5px; .
Chúc thành công!
Nhận xét
Bạn giúp mình lỗi này với : http://luutrong.blogspot.com/
Trả lờiXóaSidebar của mình có độ rộng là 250px . Khi mình để độ rộng của menu chính cấp 1 là 250px thì không hiển thị được menu con. Còn khi để nhỏ hơn 250px menu con có hiển thị nhưng ko được đầy đủ ( cả menu chính và con chỉ hiển thị trong khung sidebar 250px - ko hiển thị được ra ngoài main).
Bạn giúp mình cho nó hiển thị ra ngoài- ko bị giới hạn bởi sidebar với. Cảm ơn bạn rất nhiều :D
Bạn xó thuộc tính overflow:hidden trong đoạn code sau:
Xóa#main-wrapper{background:#fff url(http://1.bp.blogspot.com/-YLR0ecFMGcU/T94oo4nsVQI/AAAAAAAAG6w/yu9ZK1o-n98/s1600/bg_content.gif) repeat-x top;width:770px;float:left;word-wrap:break-word;overflow:hidden;border-top:1px solid #fff;}
Cảm ơn bạn :D
XóaMình đã xóa nhưng vẫn chưa được, bạn giúp mình tiếp được ko :D.
Ah, được rồi bạn à, mình xóa thuộc tính overflow:hidden ở : #sidebar-wrapper{width:250px;float:$endSide;word-wrap:break-word;overflow:hidden}.
XóaCảm ơn bạn nhiều nhiều :D
Nam ơi cho mình hỏi, làm sao có thể hiển thị Nhãn bài viết trên trang chủ đi chung với bài viết được!
Trả lờiXóaCám ơn bạn!
Cách 1: Thêm đoạn code bên dưới vào trước thẻ <data:post.body/>:
Xóa<span class='post-labels'>Nhãn:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=10"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> \</b:if>
</b:loop>
</b:if>
</span>
Cách 2 sử dụng tiện ích AUTO REDMORRE
Nam ơi, thẻ của tôi tới 4 thẻ lận, nhưng tôi thêm vô thẻ nào cũng không hiện hết á, nó bị lỗi cho max-results đó, còn AUTO REDMORRE tôi không dùng được vì tôi chỉ thiếu Nhãn hà, còn tên người đăng, nhận xét có rồi.
Trả lờiXóaBạn giúp với, cám ơn Nam!!
Bạn thêm chữ amp vào sau chữ & ở đoạn &max-results=10 trong code trên
XóaCho mình hỏi thêm phát nữa về cái này :D
Trả lờiXóaMình muốn làm nhiều hơn 1 menu thì mình cần thay đổi thuộc tính gì bạn. Mình đã thử thay một số chỗ giống nhau như "sidebarmenu" thành tên khác nhưng ko được ...
Bạn có thể giúp mình chứ :D. Cảm ơn bạn !
Cả sidebarmenu1 thành sidebarmenu23 nha.
XóaMình vẫn chưa làm được. Mình đã thay đổi hết sidebarmenu thành menult cả chỗ initsidebarmenu thành initmenult nhưng vẫn ko được :D
XóaOke đẻ mình test lại rồi trả lời bạn nha.
XóaAh được rồi... do mình thay nhầm 1 chỗ "menunlt"
Xóađáng ra là menult :))) mò lại mấy lần mới thấy :)). Làm cái này ko cẩn thận nên đi hỏi nhiều thế đấy. Mong bạn thông cảm :D
Cảm ơn bạn đã trả lời nhiệt tình :D.
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn cho mình hỏi tại sao mình copy code của menu 1, tạo 1 java/html khác rồi paste vào nhưng nó ko hiện lên dc menu cấp 2 v bạn. thanks bạn
Trả lờiXóacho mình hỏi tí. mình muốn làm Post Popular -label-comment có tab để chuyển qua lại. Khi vào trang chủ hay các trang khác nó chỉ hiển thị một cái thôi. Mình xem rồi, nay tìm lại link không thấy. MOng bạn giúp đỡ. cám ơn nhé.
Trả lờiXóa