Đăng bởi Admin | 26/6/13 | 6 nhận xét
Hôm nay Namkna sẽ giới thiệu cho các bạn thêm một mẫu Menu ngang sổ dọc nữa, lạo Menu này chỉ có 1 cấp. tuy nhiên nhìn rất đẹp thích hợp cho nhiều blog khác nhau. Các bạn có thể xem Demo để thấy rõ hơn. Nếu không thích bạn có thể xem mẫu khác đẹp hơn tại đây
Hình minh họa |
Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> .#drop {
margin: 0;
padding: 15px;
z-index:100;
position:relative;
}
#dropmenu_namkna li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#dropmenu_namkna li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#dropmenu_namkna li a:hover {
background: #C8C8C8;
}
#dropmenu_namkna li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
z-index:30; /* thuộc tính hiện menu con đối với các blog để nổi bracgrou */
}
#dropmenu_namkna li ul li {
float: none;
display: inline;
}
#dropmenu_namkna li ul li a {
width: auto;
background: #CAE8FA;
}
#dropmenu_namkna li ul li a:hover {
background: #A3CEE5;
}
5- Thêm đoạn mã sau vào trước thẻ </head> . <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function dropmenu_namkna_open() { dropmenu_namkna_canceltimer(); dropmenu_namkna_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function dropmenu_namkna_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function dropmenu_namkna_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function dropmenu_namkna_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#dropmenu_namkna > li').bind('mouseover', dropmenu_namkna_open) $('#dropmenu_namkna > li').bind('mouseout', dropmenu_namkna_timer)}); document.onclick = dropmenu_namkna_close; //]]> </script>
6- Lưu lại
7- Vào Phần tử trang Thêm 1 tiện ích HTML/Javarscrip trên phần header và thêm đoạn code sau vào:
<ul id="dropmenu_namkna"> <li><a href="/">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#"> tên menu 1.1</a></li> <li><a href="#"> tên menu 1.2</a></li> <li><a href="#"> tên menu 1.3</a></li> </ul> </li> <li><a href="#"> tên menu 2</a> <ul> <li><a href="#"> tên menu 2.1</a></li> <li><a href="#"> tên menu 2.2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#"> tên menu 3.1</a></li> <li><a href="#"> tên menu 3.2</a></li> <li><a href="#"> tên menu 3.3</a></li> <li><a href="#"> tên menu 3.4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </li> </ul>
- Trong đó:
- Lưu tiện ích lại.
- Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
- Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
- Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
- Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
- Nếu muốn các Menu nhiều cấp bạn tham khảo bài viết này
Chúc thành công!
Theo Namkna
Thu thuat vi tinh
Có 4 me nu con mà chỉ xổ ra đc 1 me nu con thôi. mong bạn giúp đỡ
Trả lờiXóaSao vậy? Xổ ra được 1 menu là đúng rồi đấy, bạn cứ coppy cái menu con đó chèn ngay xuống dưới nó (muốn có bao nhiêu thì dán nó xuống bấy nhiêu là được thôi mà (bạn trỏ chuột vào nút Thủ thuật trên thanh menu ngang của mình sẽ rõ, nó cũng như vậy đấy)
Trả lờiXóaNhư ở Munu 1 có 3 me nu com nhưng chỉ xổ ra đc 1 me nu con là ten menu 1 thôi còn 2 vầ 3 không có tưng tự mấy cái khác cũng vậy. chỉ đc 1 menu con dầu thôi
Trả lờiXóaa xem thử xem nè http://nguyenxuanthanh1992.blogspot.com/
Trả lờiXóaBạn thông cảm, mạng nhà mình dạo này hỏng nên không đi đâu được. Gọ ghẹ trả lời các bạn là đã khó khăn lắm rồi...Khi nào nó mướt thì mình sẽ qua. Bạn có thể tham khảo thêm các bài viết khác nha. Nên nhớ là chỉ thừa ra 1 kí tự là nó đã bị lỗi rồi (Khi mẫu báo lỗi ở dòng nào nó sẽ thông báo và hiện lên màu đỏ đó, bạn có thể xóa dòng đó đi rỗi lưu mẫu xem thử lại...). Cứ bấm vào XEM TRƯỚC MẪU, được thì mới lưu. Chẳng may lưu rồi mà bị lỗi thì bấm Ctrl + z để xóa đi thao tác vừa làm ( lưu ý là thao tác này chỉ có tác dụng khi bạn chưa thoát khỏi trang đó). Chúc bạn sớm thành công!...
XóaHay bạn làm theo mẫu này trông đẹp hơn.
Xóa