Home »

Tạo Drop Menu Nhiều Cấp Cho Blogger

Friday, 23 August 2013
Mình Sưu tầm được bài viết này từ Võ Quốc An mình thấy hay nên post lên cho mọi người cùng xem


display: đây là thuộc tính ẩn hiện menu con.
display:none; ẩn module đi
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)
z-index: là thuộc tính sắp xếp các lớp menu.
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'>
<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>
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:
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
ul {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 */
save file menu.html lại và chạy thử sẽ thấy menu có dạng như thế này
Vẫn chưa đẹp lắm. Mình sẽ xóa luôn dấu gạch chân và để các tiêu đề cách nhau xa 1 tí bằng cách thêm các css sau:
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'>
<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>
Lúc này menu của bạn sẽ giống như sau:
Đã bắt đầu xuất hiện menu con rùi. Bây giờ ta sẽ ẩn các menu con này đi. Cụ thể là ta sẽ ẩn các ul có class là ul.lv1 bằng cách thêm css sau:
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'>
<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>
Giờ ta thêm các ul vào các li-lv2 thì sẽ có được đoạn code 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>
<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>
Giờ save lại và rê chuột vào tiêu đề 1 thì nó sẽ có dạng như sau:
Hơi dài nhưng cơ bản là hiện ra đúng rùi. Tiếp tục ẩn các ul lv2 đi và hiện nó ra khi rê chuột vào li lv2 bằng 2 đoạn css sau (tương tự như ở 1 cấp thôi)
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:
Tốt rồi, bây giờ quay lại vấn đề lúc nãy của chúng ta: đưa ul lv2 qua phải li lv2. Cũng như ở drop 1 cấp ta dùng bộ thuộc tính position:relative; và position:absolute; cho li lv2 và ul lv2 để ul lv2 lệ thuộc vào li lv2 bằng cách thêm đoạn css sau:
li.li-lv2 {position:relative;}
ul.ul-lv2 {position:absolute;}
Save lại và kiểm tra sẽ thấy như sau:
ul lv2 đã nằm độc lập với các li lv2 khác (tiêu đề 1.2 và 1.3) nhưng vẫn chưa đẩy qua phải.
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
Tốt rồi giờ thì ul lv2 đã qua phải li lv2 rồi nhưng lại bị xuống hàng, nguyên nhân là chiều rộng ul lv2 ko đủ. Một lần nữa ta gán thuộc tính width:200px cho ul lv2.
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 :)
Chúc Các Bạn Thành Công
Nguồn bài viết: Võ Quốc An Blog

Tags:

Comments[ 0 ]


Post a Comment