Thứ Sáu, 24 tháng 2, 2012

TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (KIỂU 2)

Với thủ thuật này, các bạn có thể tạo cho mình một menu ngang màu đen, bên phải của mỗi menu có hình mũi tên, khi rê chuột đến mũi tên này thì sẽ xuất hiện một dãy menu dọc được xổ xuống phía dưới.







Bạn bấm vào thẻ Xem thử phía dưới để thấy rõ hơn.

Xem thử


Đầu tiên, bạn đăng nhập vào Blog > Chọn Thiết kế > Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head>



Bây giờ, bạn copy đoạn code phía dưới dán trên dòng lệnh </head> này và bấm Lưu mẫu. (Vì đoạn code này xung đột với các code trên trang này, do đó các bạn thông cảm download TẠI ĐÂY)
Bước kế tiếp, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào.


<ul class="topnav">
 
<li><a href="#">Home</a></li>
<li>
<a href="#">Menu 1</a>
<ul class="subnav">
<li><a href="#">Menu con 1</a></li>
<li><a href="#">Menu con 2</a></li>
<li><a href="#">Menu con 3</a></li>
<li><a href="#">Menu con 4</a></li>
<li><a href="#">Menu con 5</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="subnav">
  <li><a href="#">Menu con 1</a></li>
  <li><a href="#">Menu con 2</a></li>
  <li><a href="#">Menu con 3</a></li>
  <li><a href="#">Menu con 4</a></li>
  <li><a href="#">Menu con 5</a></li>
  <li><a href="#">Menu con 6</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
 
</ul>



Bây giờ, bạn thay đổi các dòng lệnh màu đỏ (đây là tên hiển thị các menu, ví dụ: thủ thuật blogspot, thủ thuật Windows...) và dấu "#" màu xanh (đây là link các trang mà bạn muốn liên kết đến), cuối cùng bấm Lưu lại là xong.
Chúc các bạn thành công.

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét:

Đăng nhận xét