NGANH XỔ DỌC - TRANG NHÃ (16)

Menu ngang xổ dọc một cấp cho blogspot Style 1

Fairstar | 10-03-2012 | nhận xét (1)

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

Demo for Post

Hình minh họa

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 {
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 đó:  

• 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.

- Lưu tiện ích lại.

- 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!