Tạo dropmenu xổ dọc một cấp đẹp cho blogspot

Dropmenu là một dạng menu chuyên nghiệp được rất nhiều người sử dụng cho website/blog cũng để tăng thêm tính chuyên nghiệp cho trang. Dropmenu thường được dùng đối với những trang web có nhiều chuyên mục mẹ và chuyên mục con, không chỉ những trang web tin tức hay bán hàng mà ngay cả những blog cá nhân cũng được sử dụng khá phổ biến. Dropmenu cũng rất đa dạng về phong cách và kiểu phân cấp cho chuyên mục.    

Ảnh minh hoạ

Các bạn có thể xem demo theo link bên dưới:

» XEM DEMO

Bài viết này mình sẽ hướng dẫn các bạn tạo một menu xổ xuống (drop menu) giống trang traidatmui.com. Các bạn có thể xem demo tại đây.

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* cat-menu by traidatmui.com & đoàntrịnh.vn */
#kjmenu{border-bottom:4px solid #e93302;background:#eee;height:30px;padding:0 0}.nav{font-size:12px;z-index:99;float:left;padding:0;list-style:none;line-height:30px;height:30px}.nav a{position:relative;display:block;z-index:90;text-decoration:none;color:#111}.nav li{float:left;margin:0 0 0 0}.nav li a{background:url(https://lh6.googleusercontent.com/-uxk1vSYyFSQ/UqsGmq5UOsI/AAAAAAAACRc/0jjaHqKfjJ0/s12/gngngn.gif) no-repeat right center;font:bold 12px tahoma;padding:0;text-decoration:none;line-height:30px}.nav li.last a{background:none}.nav li a span{padding:5px 9px 4px;color:#000;font-weight:bold}.nav li.current-cat a,.nav li.current-cat a,.nav li:hover a,.nav li a:hover{background:none;margin-bottom:0;text-decoration:none;color:#FFF}.nav li:hover span,.nav li a:hover span{color:#eee;font-weight:bold}.nav li.home a{margin:0 8px 0 0;background:#e93302;text-align:center}.nav li.home a span{color:#fff}.nav li.news:hover,.nav li.news:hover ul{background-color:#444}.nav li.nosub:hover,.nav li.nosub:hover ul{background-color:#e93302}.nav li.news:hover ul li.first{border-top:0}.nav li.news:hover ul li.last{border-bottom:none}.nav li ul{list-style:none;position:absolute;left:-999em;width:228px;margin:0 1px 0 0;z-index:999999;padding:6px 0 0 0}.nav .last ul{background:#fff;position:absolute;width:228px;margin:0 1px;z-index:999}.nav li ul li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGkTHvZx_Ws8OYKAzNBpZfux2prxGY8juV6SqtSXCuipragft1omWRZb8fHi0uAj-A2Qw-crgn7IHZ-WOarrKW5l4Fe7dMcQz7cxmA6BDGCeRhx6krarh9p3QI8w0kQ9m_BxaqI6EIQI/s10/bullet.png) no-repeat 8px center;width:195px;clear:both;padding:7px 10px 7px 23px;border-top:1px dashed #333;margin-left:0}.nav li ul li a{line-height:1.3;padding:0;color:#eee !important;font-size:12px;text-transform:none;background:none}.nav li:hover ul li a{background:none;font-weight:bold}.nav li ul li:hover{border-top:1px dashed #e13203;background:#e93302 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGkTHvZx_Ws8OYKAzNBpZfux2prxGY8juV6SqtSXCuipragft1omWRZb8fHi0uAj-A2Qw-crgn7IHZ-WOarrKW5l4Fe7dMcQz7cxmA6BDGCeRhx6krarh9p3QI8w0kQ9m_BxaqI6EIQI/s10/bullet.png) no-repeat 8px center}.nav li:hover,.nav li.hover{position:static}.nav li:hover ul ul,.nav li:hover ul ul ul,.nav li:hover ul ul ul ul{left:-999999}.nav li:hover ul,.nav li li:hover ul,.nav li li li:hover ul,.nav li li li li:hover ul{left:auto}.subMenu{background:#f4f5f7 url(https://lh5.googleusercontent.com/-jWlJbB0nouU/UqsNcmwrGiI/AAAAAAAACSA/co9NiKb01vc/s27/bfgfgfg.gif) repeat-x 0 -2px;height:25px;padding:0;margin-bottom:7px}

Bước 2: Tìm đến vị trí muốn đặt menu và dán đoạn code bên dưới vào:

<!-- cat-menu by traidatmui.com & đoàntrịnh.vn -->
<div id='kjmenu'>
<ul class='nav'>
<li class='home iconhome'><a href='/'><span>Home</span></a></li>
<li class='news'><a href='#'><span>Dịch vụ</span></a>

<ul class='children'> 
<li class='first'><a href="#">Thiết kế Blogspot</a></li>
<li><a href="#">Tên miền - Domain</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Giới thiệu sản phẩm</a></li>
<li><a href="#">Free templates</a></li>
<li class='last'><a href="#">Free templates</a></li>

</ul>

</li>

<li class='news'><a href='#'><span>Blogspot Tips</span></a>
<ul class='children'> 
<li class='first'><a href="#">Blogger nâng cao</a></li>
<li><a href="#">Blogger cơ bản</a></li>
<li><a href="#">Thủ thuật SEO</a></li>
<li><a href="#">Tiện ích</a></li>
<li><a href="#">Domain&Hosting</a></li>
<li class='last'><a href="#">Free templates</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Thủ thuật PC</span></a>
<ul class='children'> 
<li class='first'><a href="#">Máy tính</a></li>
<li><a href="#">Photoshop</a></li>
<li class='last'><a href="#">Internet</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Cuộc sống</span></a>
<ul class='children'> 
<li class='first'><a href="#">Kinh nghiệm</a></li>
<li><a href="#">Bài học</a></li>
<li><a href="#">Ý nghĩa</a></li>
<li><a href="#">Danh ngôn</a></li>
<li><a href="#">Bí mật</a></li>
<li class='last'><a href="#">Cung hoàng đạo</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Kiến thức</span></a>
<ul class='children'> 
<li class='first'><a href="#">Marketing</a></li>
<li><a href="#">Chứng khoán</a></li>
<li><a href="#">Kiến thức IT</a></li>
<li><a href="#">Kỹ năng mềm</a></li>
<li class='last'><a href="#">Tiếng anh</a></li>

</ul>
</li>
<li class='news'><a href='#'><span>Download</span></a>
<ul class='children'> 
<li class='first'><a href="#">Phần mềm</a></li>
<li><a href="#">Ebooks</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Gói hình ảnh</a></li>
<li class='last'><a rel="nofollow" href="#">Toolbar Firefox</a></li>

</ul>
</li>
</ul>
<div class='clear'/>
</div></div>
<!-- end cat-menu --> 

Nếu muốn thêm một chuyên mục các bạn chỉ cần chèn vào trước phần màu xanh đoạn code sau:

<li class='news'><a href='#'><span>Chuyên mục</span></a>
<ul class='children'> 
<li class='first'><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li class='last'><a href="#">Menu 5</a></li>
</ul>
</li>

Chúc các bạn thành công !

Tác giả bài viết: Doan Trinh - http://www.đoàntrịnh.vn/