"Tạo menu thả xuống nhiều thư mục con"

(Traidatmui.com) – Hôm nay mình sẽ hướng dẫn các bạn thực hiện một thủ thuật để tạo một menu ngay dạng thả xuống với nhiều cấp bậc con khác nhau. Với menu này bạn có thể tạo thêm rất nhiều thư mục trong menu, vì với một thư mục chính bạn có thể tạo thêm nhiều thư mục con khác. Menu này có sẽ làm cho blog bạn trông đẹp hơn đấy và cũng giúp bạn trong việc chia nhỏ các thư mục trong blog của bạn. Thủ thuật này cũng khá phức tạp, bạn hãy xem hình ảnh bên dưới sẽ thấy rỏ hơn.

Hình ảnh minh họa
☼ Bắt đầu thủ thuật

1. Đầu tiên đăng nhập vào blog của bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://data-traidatmui.appspot.com/scripts/jquery.min.js' type='text/javascript'/>
<script src='http://data-traidatmui.appspot.com/scripts/drop_menu.js' type='text/javascript'/>


4. Save template lại
5. Bây giờ bạn hãy thêm 1 HTML/Javascript và dán code bên dưới vào
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{
display: inline-block;
}

/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/

.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul{
top: 0;
}

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Cuộc sống</a></li>

<li><a href="#">Học tập</a></li>

<li><a href="#">Thủ thuật</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="#">Giải trí­</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>


</ul><br style="clear: left" />
</div>


Chỉnh code:
- Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
- Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
- Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
- Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
- Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
- Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:
<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:
<li><a href="#">Học tập</a></li>

<li><a href="#">Công cụ</a></li>

6. Save lại
Chúc bạn thành công

Xem khác cùng chủ đề

16 nhận xét | Viết lời bình

XDN
1/15/2011 01:37:00 SA Trả lời

Em đạt tiện ích vào phần Header thì nó bị lỗi anh ạ,không xổ xuống,còn đặt vào phần bài đăng thì nó có xổ xuống nhưng lại bị lỗi thanh menu ngang.

5/29/2011 02:39:00 SA Trả lời

Mình cũng vị tương tự như bạn XDN đó phải làm gì để khắc phục thế hả bạn

6/06/2011 12:59:00 SA Trả lời

blog của em đã thử tạo rất nhiều menu kiểu sổ xuống nhưng ko cái nào sổ xuống là sao hả anh.Em tưởng e chỉnh code sai,nhưng nhiều cái e chép nguyên của a rồi cho link của em vào nhưng cũng bị y nguyên như thế,em ko hiểu sao nó bị như thế,anh giải thích dùm em với

6/06/2011 01:16:00 CH Trả lời

@quyetpro
Đợt trước bị như vậy,hỏi anh Đình nhưng không thấy trả lời,mình nghĩ là do xung đột,nên thây temblate mới,giờ thì ok rồi.
Mình dùng chính Menu mà anh Đình giới thiệu ở trên đó.
Ghé thăm Blogxd.co.cc

6/07/2011 07:07:00 CH Trả lời

@xdn-blogxd
Mình đã tạo njieeuf kiểu Menu sổ dọc nhưng trên blog của mình chẳng cái nào chịu sổ xuống,mà có cái nào sổ xuống thì nó cũng chỉ hiện ra 1 nửa dòng chữ của submenu con cấp 1 thôi bạn ạ,mình đã hết cách rồi.Mặc dù mình lấy nguyên mẫu của a Đinh rồi thay link của mình vào vẫn bị như vậy.Các bạn giải thích giúp mình với.Email:Tuyennguoiyeupro@gmail.com;hix thanks

6/07/2011 07:14:00 CH Trả lời

@xdn-blogxd
Mình đã tạo nhiều kiểu menu sổ dọc rồi nhưng trên blog của mình ko cái nào chịu sổ xuống.Nó chỉ hiện ra 1 thanh menu chính,có cái thì các submenu con cấp 1 hiện ra được 1 nửa dòng chữ bên dưới thanh menu chính.Mình đã lấy nguyên code của a Đinh rồi dán link của mình vào nhưng vẫn bị như vậy.Các bạn giải thích giúp mình với.Thanks

6/08/2011 09:00:00 SA Trả lời

bạn gà quá.mình làm thành công nè.bạn xem blog mình là chipkool.tk

6/09/2011 12:16:00 SA Trả lời

@ChipKool_Online
Blog của mình bị xung đột giữa 2 JavaScript nên ko được.

6/09/2011 07:50:00 SA Trả lời

@xdn-blogxd bạn làm cái menu tin mới thành từng khung nhỏ như thế nào vậy.chia sẻ với mình được không?Email mình là new_man9xone

Admin
6/12/2011 06:52:00 SA Trả lời

Những lỗi mà bạn quyetpro và XDN nói ở trên mình đã thử test thì ở một số template của Blogger xảy ra lỗi, một số thì OK! Điều này mình sẽ cố gắng tìm cách khắc phục ở những templates bị lỗi này, nếu thành công mình sẽ chia sẻ cùng các bạn.

6/12/2011 07:29:00 SA Trả lời

mình muốn đổi màu của các menu và màu chữ trên menu thì phải làm sao bạn ? mình thử đổi mà ko đc, mong bạn chỉ

6/12/2011 09:27:00 CH Trả lời

Anh VDinh ơi cái Code của anh chắc chắn là đúng rồi,nhưng em thử trên blog của em kể cả máy cái menu ngang có sổ dọc xuống như Fandung.com giới thiệu cũng ko được.Nhưng menu dọc bên nhiều cấp đặt ở side-bar giống 24h.com.vn thì được rồi anh ạ.Tiện thể anh cho em hỏi là blog của em cứ mỗi lần thêm thủ thuật hiển thị Bài đăng mới hơn,cũ hơn cùng chủ đề hoặc tùy chỉnh bài đăng mới hơn,cũ hơn...như trên blog của anh giới thiệu hay các thủ thuật tương tự do các blog khác giới thiệu(nhưng khác cách thực hiện) đều bị nhân đôi nội dung của mỗi bài viết.Nếu xóa các thủ thuật đấy đi thì lại ko sao.em cũng botay.com.Hĩ nhờ anh giải thích dùm.Thanks anh nhiều.

Admin
6/13/2011 02:44:00 SA Trả lời

Nhân đôi nội dung tức là các tiêu đề bài viết điều lặp lại đúng không em?

6/13/2011 07:49:00 SA Trả lời

toàn bài luôn anh ạ,nhưng em khắc phục được rồi anh ạ,do có 2 thẻ (div style='clear: both;') (!-- clear for photos floats -- )cùng tồn tại.À anh VDinh ơi em muốn xóa cụm từ "HIỂN THỊ BÀI ĐĂNG MỚI NHẤT CÓ NHÃN 'TEN NHAN'.HIỂN THỊ BÀI ĐĂNG CŨ HƠN" ở trên cùng của phần bài đăng khi em click chuột vào 1 nhãn nào đó thì làm thế nào hả anh?

Admin
6/13/2011 07:08:00 CH Trả lời

Em xem bài viết anh hướng dẫn tại đây nhe.

12/18/2011 04:56:00 SA Trả lời

Tôi đã làm được. OK
Thank You

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang