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
Chúc các bạn thành công !
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-IYWOo3uwwdRvpOaxaaQoh0IdtsXbjKRza3dvvDE8t3321svkJyEGU0wE6wQGfjvM4Fo-mcolXxeoXx6W5I19RT6gXT-yBnS4sv4KjZqWbB_YRVTd764f1RBL_-s2u5Ndipzl7c7WXY/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/
Nhận xét
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóanamkna à, b có thủ thuật tạo menu tương tự trang http://www.nasa.gov/multimedia/index.html#.U7ffH5R_vn4 ko? khi rê chuột vào 1 menu thì 1 trang menu con hiện ra rất hay....
Trả lờiXóaBạn có thể xem bài viết này: Mega Drop Down Menu từ CSS cho Blogger
XóaNgoài ra bạn có thể chọn kiểu khác Tại đây
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaMình muốn hiển thị nội dung như trang blogspot của Nam dạng như sau: Home>>Clip vui>>... (theo dạng phân cấp khi mở nội dung đường dẫn cần xem) thì mình nên làm sao vậy nam?
Trả lờiXóaBạn chọn một mẫu mà bạn thích tại đây nha: Thanh điều hướng Breadcrums cho blogspot
XóaBạn ơi cho mình hỏi, bạn chỉ cách chèn menu sổ dọc vào blogspot, mình muốn chèn menu này giống như blogspot của bạn, như thanh menu màu đen, chỗ music, phim online, xem ti vi..... thì chèn đoạn code thứ 2 trong bài vào vị trí nào vậy bạn ? Cám ơn bạn
Trả lờiXóamình làm nhưng lại bị lỗi không được đẹp như bạn làm, tại sao nhỉ?
Trả lờiXóahttp://www.huthuytinh.vn/
Anh ơi em anh tò mò làm blog
Trả lờiXóaxin anh chỉ cho em cách thêm manu của blog này vào menu của blog cua em được không ạ.
http://mkr-site.blogspot.com/2012/09/widget-posting-terbaru-dengan-tooltips.html
em Muốn có 1 cái menu như thế
Làm được rồi anh ơi, thanks anh nhìu lắm :)
Trả lờiXóaem ngu về khoản này nên làm maix không được anh ơi
Trả lờiXóahttps://domiennui.blogspot.com
Trả lờiXóaem làm được rồi anh ơi
thanks anh nhiều lắm
em chỉnh sửa thêm nữa là được anh ạk
mà em có nhiều mục quá nên phần cuối còn hai mục con nó không lên được anh ạk