trang chủ
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.
 |
Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin>#drop {5- Thêm đoạn mã sau vào trước thẻ </head>
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;
}
<script src='http://tanchau123.googlecode.com/files/Menu_ngang_sodoc1cap.txt' 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 đó:
- 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.
Chúc các bạn thành công!!!
