26/6/13

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

Đăng bởi Admin | 26/6/13 | 6 nhận xét

Menu ngang xổ dọc một cấp cho blogspot Style 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


Menu ngang xổ dọc một cấp cho blogspot Style 1
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!

                                                                                                    Theo Namkna
                                                                                                    Thu thuat vi tinh

6 nhận xét:

  1. Có 4 me nu con mà chỉ xổ ra đc 1 me nu con thôi. mong bạn giúp đỡ

    Trả lờiXóa
  2. Sao 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óa
  3. Như ở 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óa
  4. a xem thử xem nè http://nguyenxuanthanh1992.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạ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óa
    2. Hay bạn làm theo mẫu này trông đẹp hơn.

      Xóa

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva