Drop Menu (Kiểu 3)

Hôm nay mình viết bài viết này để chia sẻ cho các bạn một mẫu drop menu hoàn toàn khác so với Kiểu 1 & Kiểu 2 đã đăng trước đây.

Xem Demo

1. Vào Thiết kế → chỉnh sửa HTML chèn đoạn code sau vào trước thẻ ]]></b:skin>

/* Dropdown Menu */
ul.menu{list-style-type:none; margin:0 0 20px 0; padding:0;  float:left}
ul.menu li{display:block; height:30px; float:left; position:relative; margin-right:15px; padding:0}
ul.menu li a{display:block; float:left; text-decoration:none; font-size:16px;  font-style:normal;  font-weight:bold;  padding:5px 0;  line-height:18px}
ul.menu li a span{font-weight:normal;padding-left:0}
ul.menu li.drop a{padding-right:7px}
ul.menu li a:hover{background:none}
ul.menu li.drop:hover li{border:none}
ul.menu li.drop span.toggle{display:block; float:left; width:18px; height:26px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIMPX4a0ISZqFlV847YgO8_lyRQLfDCXKLrW782GLTnzl_erPRxnYGytN92s3FXoGULS6cr5sq08hZ8KDTqLumY83-Zy8Lp8RDBPR5b35wdBa7_Xu3iuWIGEou2o_C-O62h0vfQYTy2PM/s0/toggle_bg.png) no-repeat 0 -18px; padding:0; margin:0}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle{background-position:0px 5px}
ul.menu li.drop:hover ul{ display:block; z-index:1; padding:6px 0}
ul.menu li ul{ min-width:150px; display:none; position:absolute; top:30px; left:0;  list-style-type:none; margin:0; padding:0; background:#e4e4e1;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px}
ul.menu li ul li{ float:none; height:auto; margin:0; padding:0; border:none}
ul.menu li ul li a{ background:#fff; float:none; display:block; font-size:13px; height:auto; margin:0 5px 1px 5px; padding:5px 7px;  font-weight:bold; text-transform:none}
ul.menu li:hover ul{ border:none}
ul.menu li:hover ul *{ color:#444}
ul.menu li ul li:hover *{ color:#2b74a9}
ul.menu li ul li a:hover { background:#fff}

 2.Tiếp tục chèn đoạn code sau vào sau thẻ </header>

<div class='dropmenu'>
<b:section class='dropmenu' id='dropmenu' showaddelement='no'>
<b:widget id='HTML18' locked='false' title='dropmenu' type='HTML'/>
</b:section>
</div>

Save template lại và về trang chủ sẽ thấy xuất hiện thêm 1 tiện ích HTML phía dưới header.
3.Chép đoạn code sau vào nội dung HTML rồi lưu lại là xong.

<ul class='menu'>
      <li class='drop'>
         <a href='/p/sitemap.html'>Chủ Đề</a>
              <span class='toggle'/>
              <ul>
                 <li><a href='/search/label/Blogger?max-results=5'>Blogger</a></li>
                 <li><a href='/search/label/Bookmark?max-results=5'>Bookmark</a></li>
                 <li><a href='/search/label/Button?max-results=5'>Button</a></li>
                 <li><a href='/search/label/Code?max-results=5'>Code</a></li>
                 <li><a href='/search/label/Comments?max-results=5'>Comments</a></li>
                 <li><a href='/search/label/Contact?max-results=5'>Contact Form</a></li>
                 <li><a href='/search/label/Giao diện?max-results=5'>Giao diện</a></li>
              </ul>
      </li>
      <li class='drop'>
         <a href='/p/sitemap.html'>Bài Viết Xem Nhiều</a>
              <span class='toggle'/>
              <ul style='width:400px'>
                 <li><a href='/2011/12/chia-header-footer-thanh-2-hoac-3-phan.html'>Chia header, footer thành 2 hoặc 3 phần</a></li>
                 <li><a href='/2012/01/bo-khung-hinh-cho-anh-trong-bai-viet.html'>Bo khung hình cho ảnh</a></li>
                 <li><a href='/2012/01/mot-giao-dien-khac-cho-threaded.html'>Giao diện mới cho Threaded Comments</a></li>
                 <li><a href='/2011/12/tao-khung-quick-comments-cho-blog-cbox.html'>Tạo khung quicks comments</a></li>

              </ul>
      </li>
      <li>
         <a href='/2011/01/ask.html'>Hỏi - Đáp</a>
      </li>
   </ul>

Chú ý:
1. Thay đổi những phần màu đỏ thành liên kết đến bài viết hoặc label bạn muốn  hiển thị.
2. Trong đoạn code ở bước 3 có 1 đoạn  style='width:400px' là chiều rộng của cái menu bạn có thể tăng giảm giá trị cho phù hợp với blog của mình.
3. Bạn có thể bỏ qua bước 2 chèn trực tiếp đoạn code ở bước 3 vào sau thẻ </header> cũng được. Nhưng như zậy sau này mỗi lần sửa liên kết bạn phải vào chỉnh sửa HTML của template mới sửa được.

Chúc thành công.