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.
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/AVvXsEh7knVvDwk_IvkNuCFxxNhIqh3BwB1fDpZeWxQBx00nHj5taS02I7thxXiRnf6zKxXvUHi6Phyphenhyphen_v_E5q7xedQ_k2veB3ZzKVhHkTX8OpoH5Fjy621OPuCFwx1mdMTQs05Vw1l87Vb6C6-w/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}
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/AVvXsEh7knVvDwk_IvkNuCFxxNhIqh3BwB1fDpZeWxQBx00nHj5taS02I7thxXiRnf6zKxXvUHi6Phyphenhyphen_v_E5q7xedQ_k2veB3ZzKVhHkTX8OpoH5Fjy621OPuCFwx1mdMTQs05Vw1l87Vb6C6-w/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}
<div class='dropmenu'>
<b:section class='dropmenu' id='dropmenu' showaddelement='no'>
<b:widget id='HTML18' locked='false' title='dropmenu' type='HTML'/>
</b:section>
</div>
<b:section class='dropmenu' id='dropmenu' showaddelement='no'>
<b:widget id='HTML18' locked='false' title='dropmenu' type='HTML'/>
</b:section>
</div>
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>
<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.
- Title : Drop Menu (Kiểu 3)
- Posted by :
- Date : Thứ Ba, tháng 9 03, 2013
- Labels : Một số thủ thuật Blogspot
 ){kind=link}