Search trên google 1 tí thôi thì sẽ ra rất nhiều bài viết tạo drop menu cho web, blog... nhưng tổng quan mà nói thì mình thấy đa số mọi người đều chỉ share code mà không hướng dẫn chi tiết về cách làm nên hôm nay mình viết hướng dẫn này nhằm hỗ trợ mọi người tự thiết kế ra drop menu cho riêng mình. Bài viết này mình sẽ hướng dẫn tạo drop menu từ 1 đến 3 cấp. Tất nhiên khi đã hiểu rồi thì bạn muốn làm bao nhiêu cấp cũng được.
Phần 1: Một số lưu ý trước khi bắt đầu:
1. Về CSS: Một số css mình sẽ sử dụng trong thủ thuật này:display: đây là thuộc tính ẩn hiện menu con.display:none; ẩn module điz-index: là thuộc tính sắp xếp các lớp menu.
display:block; hiện module vào 1 block
display:inline; xếp các module vào cùng hàng ngang (để tạo menu ngang)
margin: và padding: là 2 thuộc tính sắp xếp vị trí tương đối của các đối tượng với nhau
width: là thuộc tính qui định chiều rộng của module
ngoài ra còn 1 số thuộc tính css khác nữa để trang trí cho menu. Bạn có thể tìm hiểu chi tiết tại bài viết CSS căn bản
2. Để hỗ trợ cho việc tạo drop menu thì bạn nên tạo 1 file html để làm. Sau khi làm xong chỉ việc lấy code gắng vào template cho đỡ mất thời gian.
Việc cần làm là trên destop tạo 1 file New Text Document.txt và đổi tên file đó thànhmenu.html
Dán đoạn code sau vào file menu.html để làm menu.
<html>
<head>
<style type='text/css'>
Đây là vị trí đặt css
</style>
</head>
<body>
Đây là vị trí đặt menu
</body>
</html>
Phần 2. Bắt đầu vào việc nào
1. Tạo menu ngang:Thông thường các drop menu đều nằm trong 1 menu ngang nên việc đầu tiên mình sẽ hướng dẫn các bạn làm menu ngang trước. Cấu trúc của 1 menu có dạng như sau:
<ul class='dropmenu'>Chép đoạn code trên vào vị trí đặt menu trong file menu.html và chạy thử file đó bạn sẽ thấy menu có dạng như sau:
<li class='li-lv1'><a href='link1' target='_blank'>Tiêu Đề 1</a></li>
<li class='li-lv1'><a href='link2' target='_blank'>Tiêu Đề 2</a></li>
<li class='li-lv1'><a href='link3' target='_blank'>Tiêu Đề 3</a></li>
</ul>
Trong đoạn code trên mình đã gán thêm class='dropmenu' cho ul và class='li-lv1' cho li để tiện việc quản lý vì sau này sẽ xuất hiện rất nhiều ul và li khác nữa.
Bây giờ ta sẽ ẩn các dấu chấm tròn phía trước các tiêu đề và cho các tiêu đề vào hàng ngang bằng cách thêm đoạn css sau vào vị trí đặt css
save file menu.html lại và chạy thử sẽ thấy menu có dạng như thế nàyul {list-style-type:none;} /* xóa dấu chấm tròn */ul, li {margin:0; padding:0} /* đưa giá trị margin và padding của ul và li về 0 */
li.li-lv1 {float:left} /* li có class là li-lv1 sẽ đẩy qua trái và xếp theo hàng ngang */
ul.dropmenu a {text-decoration:none; padding:0 5px} /* xóa gạch chân của link */Xong lưu lại. Bây giờ menu sẽ có dạng như thế này
Đã xong cái menu ngang rồi đó. Tất nhiên mình chưa cài thêm những css khác vd như màu nền, màu chữ... mấy cái này các bạn tìm hiểu trong bài viết css căn bản sẽ có đầy đủ và tự tạo ra nét riêng cho mình.
2. Menu Drop 1 cấp
Đoạn code của menu ở phần trên chưa có menu con bên trong. Để tạo menu con bên trong ta cần thêm các đoạn code tương tự như vậy vào trong <li> ... </li> cụ thể như sau:
<ul class='dropmenu'>Lúc này menu của bạn sẽ giống như sau:
<li class='li-lv1'>
<a href='link1' target='_blank'>Tiêu Đề 1</a>
<ul class='ul-lv1'>
<li class='li-lv2'><a href='link1.1' target='_blank'>Tiêu Đề 1.1</a></li>
<li class='li-lv2'><a href='link1.2' target='_blank'>Tiêu Đề 1.2</a></li>
<li class='li-lv2'><a href='link1.3' target='_blank'>Tiêu Đề 1.3</a></li>
</ul>
</li>
<li class='li-lv1'>
<a href='link2' target='_blank'>Tiêu Đề 2</a>
<ul class='ul-lv1'>
<li class='li-lv2'><a href='link2.1' target='_blank'>Tiêu Đề 2.1</a></li>
<li class='li-lv2'><a href='link2.2' target='_blank'>Tiêu Đề 2.2</a></li>
<li class='li-lv2'><a href='link2.3' target='_blank'>Tiêu Đề 2.3</a></li>
</ul>
</li>
<li class='li-lv1'>
<a href='link3' target='_blank'>Tiêu Đề 3</a>
<ul class='ul-lv1'>
<li class='li-lv2'><a href='link3.1' target='_blank'>Tiêu Đề 3.1</a></li>
<li class='li-lv2'><a href='link3.2' target='_blank'>Tiêu Đề 3.2</a></li>
<li class='li-lv2'><a href='link3.3' target='_blank'>Tiêu Đề 3.3</a></li>
</ul> </li>
</ul>
ul.ul-lv1{display:none} /* ẩn các ul có class là ul-lv1 */
Xong save file menu.html lại và chạy thử. Các menu con đã ẩn nhưng khi rê chuột vào các tiêu đề vẫn chưa hiện ra menu con. Để hiện ra các menu con khi rê chuột vào tiêu đề ta cần thêm đoạn css sau:
li.li-lv1:hover ul.ul-lv1 {display:block} /* khi hover li có class là li-lv1 thì ul có class ul-lv1 sẽ hiện ra ở dạng block */
Giờ thì menu đã hiện ra nhưng đồng thời cũng xảy ra tình trạng khi rê chuột vào tiêu đề 1 thì tiêu đề 2 bị đẩy qua phải. Nguyên nhân là do thuộc tính float lúc đầu của li lv1.
Để khắc phục tình trạng này ta cho vị trí các ul-lv1 lệ thuộc vào các li lv1 bằng cách sử dụng 2 thuộc tínhposition:relative; và position:absolute; cụ thể ta sẽ thêm position:relative; vào li.li-lv1 và position:absolute;vào ul.ul-lv1. Lúc này vị trí ul-lv1 sẽ bị lệ thuộc vào li-lv1.
li.li-lv1 {position:relative;}
ul.ul-lv1 {position:absolute;}
Save lại và kiểm tra. Tiêu đề hết bị trượt rồi nhưng giờ tới các tiêu đề con bị nhảy xuống hàng (sao quá trời vấn đề @_@) code vốn dĩ là zậy bạn ah, làm từ từ rùi sẽ xong thôi :)
Giờ giải quyết vấn đề tiêu đề con bị nhảy xuống hàng bằng cách thêm thuộc tính width cho ul chứa các tiêu đề con để qui định chiều rộng cho ul.
ul.ul-lv1 {width:200px}Save lại và kiểm tra. Ổn rồi! Mừng quá, làm được các menu drop 1 cấp rồi >.< còn 2 cấp nữa Oh My God!
3. Menu Drop 2 cấp
Ở trên đã hoàn thành drop 1 cấp rồi. Bây giờ tiếp tục làm drop cấp thứ 2. Cũng tương tự như drop cấp thứ nhất drop cấp thứ 2 cũng sẽ cần 1 bộ ul nằm trong li ngoài. Mình sẽ trích ra đoạn tiêu đề 1 để hướng dẫn drop cấp 2 cho ngắn gọn, các bạn làm tiêu đề 2 và 3 tương tự là đc. Dưới đây là đoạn code của tiêu đề 1.
<li class='li-lv1'>Giờ ta thêm các ul vào các li-lv2 thì sẽ có được đoạn code sau:
<a href='link1' target='_blank'>Tiêu Đề 1</a>
<ul class='ul-lv1'>
<li class='li-lv2'><a href='link1.1' target='_blank'>Tiêu Đề 1.1</a></li>
<li class='li-lv2'><a href='link1.2' target='_blank'>Tiêu Đề 1.2</a></li>
<li class='li-lv2'><a href='link1.3' target='_blank'>Tiêu Đề 1.3</a></li>
</ul>
</li>
<li class='li-lv1'>Giờ save lại và rê chuột vào tiêu đề 1 thì nó sẽ có dạng như sau:
<a href='link1' target='_blank'>Tiêu Đề 1</a>
<ul class='ul-lv1'>
<li class='li-lv2'>
<a href='link1.1' target='_blank'>Tiêu Đề 1.1</a>
<ul class='ul-lv2'>
<li class='li-lv3'><a href='link1.1.1' target='_blank'>Tiêu Đề 1.1.1</a></li>
<li class='li-lv3'><a href='link1.1.2' target='_blank'>Tiêu Đề 1.1.2</a></li>
<li class='li-lv3'><a href='link1.1.3' target='_blank'>Tiêu Đề 1.1.3</a></li>
</ul>
</li>
<li class='li-lv2'>
<a href='link1.2' target='_blank'>Tiêu Đề 1.2</a>
<ul class='ul-lv2'>
<li class='li-lv3'><a href='link1.2.1' target='_blank'>Tiêu Đề 1.2.1</a></li>
<li class='li-lv3'><a href='link1.2.2' target='_blank'>Tiêu Đề 1.2.2</a></li>
<li class='li-lv3'><a href='link1.2.3' target='_blank'>Tiêu Đề 1.2.3</a></li>
</ul>
</li>
<li class='li-lv2'>
<a href='link1.3' target='_blank'>Tiêu Đề 1.3</a>
<ul class='ul-lv2'>
<li class='li-lv3'><a href='link1.3.1' target='_blank'>Tiêu Đề 1.3.1</a></li>
<li class='li-lv3'><a href='link1.3.2' target='_blank'>Tiêu Đề 1.3.2</a></li>
<li class='li-lv3'><a href='link1.3.3' target='_blank'>Tiêu Đề 1.3.3</a></li>
</ul>
</li>
</ul>
</li>
ul.ul-lv2 {display:none}
li.li-lv2:hover ul.ul-lv2 {display:block}
Save lại và kiểm tra thử. Ẩn hiện tốt rồi nhưng nó lại ẩn hiện ở dưới chứ không phải nằm bên phải. Vấn đề bây giờ mới bắt đầu rắt rối đây. Tới đây để dể hiểu hơn mình đề nghị thêm thuộc tính background khi rê chuột vào tiêu đề li lv2 (tiêu đề 1.1, 1.2, 1.3) để nhìn rõ vấn đề. Thêm thuộc tính background bằng css sau:
li.li-lv2:hover {background:#ccc}Xong save lại rê chuột vào kiểm tra thử sẽ được thế này:
li.li-lv2 {position:relative;}Save lại và kiểm tra sẽ thấy như sau:
ul.ul-lv2 {position:absolute;}
Chú ý: lúc nãy mình đã gáng chiều rộng cho ul lv1 là 200px hay nói cách khác đoạn màu xám trong hình có chiều rộng là 200px vậy ta cần đẩy ul lv2 qua phải 1đoạn là 200px. Mặc khác do vị trí ul lv2 đã lệ thuộc vào li lv2 nên chỉ cần mép trái của ul lv2 cách mép trái li lv2 (cái khung màu xám) 1đoạn 200px là xong. Ta thực hiện việc này bằng cách thêm đoạn css sau:
ul.ul-lv2 {left:200px; top:0px}Trong đoạn css trên ngoài việc cách mép trái của li lv2 thì ta cần mép trên của ul lv2 trùng với mép trên của lv lv2 nên ta gáng thêm thuộc tính top:0px. Và kết quả sẽ thế này
ul.ul-lv2 {width:200px;}Và kết quả sẽ như thế này
Vậy là ta đã hoàn thành xong drop menu 2 cấp. Oh My God! Mỏi tay khiếp. Đọc tới đây rùi thì like và +1 giúp mình cái ủng hộ tinh thần cho mình viết tiếp nào :)
4. Menu Drop 3 cấp trở lên.
Về cơ bản thì drop từ cấp thứ 3 trở đi nó chẳng khác gì drop cấp 2, cũng chỉ bao nhiêu đó vấn đề, đọc tới đọc lui rồi cũng sẽ làm được thôi. Nếu có thắc mắc gì hay trong quá trình test có lỗi gì mà mình chưa đề cập thì để lại comment bên dưới mình sẽ bổ sung cho đầy đủ.
Còn 1 vấn đề nữa là hiệu ứng khi drop ví dụ như trượt xuống trượt wa này kia là thuộc về mảng jquery và script. Những cái này sẽ khó hơn rất nhiều nên mình không đề cập đến trong bài viết này. Từ từ rùi sẽ tới thôi :)
Còn 1 vấn đề nữa là hiệu ứng khi drop ví dụ như trượt xuống trượt wa này kia là thuộc về mảng jquery và script. Những cái này sẽ khó hơn rất nhiều nên mình không đề cập đến trong bài viết này. Từ từ rùi sẽ tới thôi :)
5. Rút gọn css.
Từ đầu bài tới giờ mình đưa ra khá nhiều các css và nhiều css như vậy thì khi làm việc sẽ không được mượt lắm nên để menu này làm việc thật sự đạt hiệu quả cao nhất bạn cần tham khảo thêm mục rút gọn css trong bài viết css căn bản.
Nguồn bài viết: Võ Quốc An Blog
Và điều cuối cùng. Để viết ra được bài viết này thì công sức bỏ ra cũng không ít. Nên nếu bạn có copy đi nơi khác thì vui lòng ghi rõ nguồn bài viết và liên kết đến bài viết này. Tôn trọng tác giả cũng là tôn trọng chính bản thân bạn.
Chúc bạn thành công!
Home
HTML/CSS
Link 1
Sublinks
jQuery/JS
PHP
MySQL
XSLT
Đăng nhận xét