CSS Note 3: Tạo DropDown Menu ngang, Dọc

Để tạo menu ngang, chúng ta sẽ sử dụng thẻ <ul> để tạo khu vực menu và <li> để tạo từng mục trong menu đó. Do vậy, trước tiên chúng ta có đoạn cấu trúc menu bằng HTML như sau, mình sẽ đặt menu vào trong một cái thẻ <div> với id là #menu.

Kế tiếp là ta có thêm một đoạn CSS sau để reset CSS cho dễ viết CSS về sau, và thêm một số style cho toàn trang web như dùng font chữ có chân chẳng hạn.

01 02 03 04 05 06 07 08 09 10 11

</p> <p>/*==Reset CSS==*/<br /> * {<br />   margin: 0;<br />   padding: 0;<br /> }</p> <p>/*==Style cơ bản cho website==*/<br /> body {<br />   font-family: sans-serif;<br />   color: #333;<br /> }<br />

Được rồi, bây giờ chúng ta sẽ tiến hành xử lý cái menu.

Trước tiên là phần bao bọc menu (tức là thẻ <ul> trong #menu), chúng ta sẽ sử dụng thuộc tính list-style-type để xóa các dấu đầu dòng, thêm màu nền và đưa văn bản bên trong ra giữa cho đẹp nha.

01 02 03 04 05 06 07

<br /> /*==Style cho menu===*/<br /> #menu ul {<br />   background: #1F568B;<br />   list-style-type: none;<br />   text-align: center;<br /> }<br />

Kết quả ta tạm có như sau:

Kế tiếp, chúng ta sẽ muốn cho các mục con nằm dàng ngang nên sẽ dùng gì nè? Vâng, bạn có thể sử dụng float: left cho tất cả thẻ <li> hoặc đưa về kiểu hiển thị inline-block.

Lựa chọn 1: Kiểu inline-block (khuyến khích)

01 02 03 04 05 06 07 08 09

<br /> #menu li {<br />   color: #f1f1f1;<br />   display: inline-block;<br />   width: 120px;<br />   height: 40px;<br />   line-height: 40px;<br />   margin-left: -5px;<br /> }<br />

Lựa chọn 2: Kiểu float

01 02 03 04 05 06 07 08

<br /> #menu li {<br />   color: #f1f1f1;<br />   float: left;<br />   width: 120px;<br />   height: 40px;<br />   line-height: 40px;<br /> }<br />

Sở dĩ kiểu float mình không có margin-left: -5px là vì cái 5px kia là kiểu display: inline-block nó tự sinh ra nên phải xóa nó đi bằng cách này.

Nếu float thì nên thêm một vài thuộc tính như sau cho #menu ul.

01 02 03 04 05 06 07

<br /> #menu ul {<br />   background: #1F568B;<br />   list-style-type: none;<br />   overflow: hidden;<br />   width: 100%;<br /> }<br />

Kết quả sau khi làm kiểu Inline.

Và cuối cùng là thêm style cho các thẻ <a> bên trong, quan trọng nhất là sẽ đưa kiểu hiển thị cho các thẻ này thành block để nó được phủ kín cái #menu ul.

01 02 03 04 05 06 07 08 09 10

<br /> #menu a {<br />   text-decoration: none;<br />   color: #fff;<br />   display: block;<br /> }<br /> #menu a:hover {<br />   background: #F1F1F1;<br />   color: #333;<br /> }<br />

Kết quả khi hoàn thành:

Xem live:

Cách tạo menu dropdown đơn giản

Bây giờ ta cũng có một menu giống như cái ở trên, nhưng mình muốn ở phần Tin tức sẽ có thêm một vài menu con nữa, như vậy mình sẽ đặt thêm một thẻ <ul> lồng bên trong item Tin tức và thẻ <ul> này sẽ mang class sub-menu để sau này dễ tái sử dụng.

Và đoạn CSS y hệt bên trên để làm cái menu đơn giản trước cái đã.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<br /> /*==Reset CSS==*/<br /> * {<br />   margin: 0;<br />   padding: 0;<br /> }</p> <p>/*==Style cơ bản cho website==*/<br /> body {<br />   font-family: sans-serif;<br />   color: #333;<br /> }</p> <p>/*==Style cho menu===*/<br /> #menu ul {<br />   background: #1F568B;<br />   list-style-type: none;<br />   text-align: center;<br /> }<br /> #menu li {<br />   color: #f1f1f1;<br />   display: inline-block;<br />   width: 120px;<br />   height: 40px;<br />   line-height: 40px;<br />   margin-left: -5px;<br /> }<br /> #menu a {<br />   text-decoration: none;<br />   color: #fff;<br />   display: block;<br /> }<br /> #menu a:hover {<br />   background: #F1F1F1;<br />   color: #333;<br /> }<br />

Bây giờ kết quả hiển thị ra là bạn sẽ thấy các menu con của thằng Tin tức bị hiển thị thế này:

Okay, vậy trước tiên, chúng ta cần phải cho .sub-menu ẩn đi cái đã.

01 02 03 04 05

<br /> /*==Dropdown Menu==*/<br /> .sub-menu li {<br />   display: none;<br /> }<br />

Bây giờ, chúng ta muốn tùy biến lại cái .sub-menu sẽ hiển thị (nếu có hiển thị) nằm bên ngoài cái phần #menu ul để nó không bị đẩy lên như vậy. Như bài trước ta đã học rồi, để tùy biến vị trí một phần tử mà không ảnh hưởng đến các phần tử khác thì sẽ sử dụng thuộc tínhposition. Nhưng mà chúng ta muốn cái .sub-menu nó phải nằm gần menu mẹ, vậy thì chúng ta phải thiết lập #menu li thành kiểu relative vì #menu li là các item cấp lớn nhất, mình gọi đó là menu mẹ.

01 02 03 04

<br /> #menu li {<br />  position: relative;<br /> }<br />

Và tiếp theo là cho cái .sub-menu thành kiểu absolute để nó luôn luôn nằm trong phạm vi menu mẹ, tức là nằm trong #menu li ấy. Chúng ta viết lại đoạn .sub-menu như sau:

01 02 03 04 05

<br /> .sub-menu {<br />  display: none;<br />  position: absolute;<br /> }<br />

Và cuối cùng, là chúng ta sẽ cho thằng .sub-menu sẽ hiển thị ra khi ta rê chuột vào menu mẹ, như vậy ta sẽ kết hợp với một pseudo-class là :hover để làm việc này. Để hiển thị ra chúng ta gán display: block cho nó.

01 02 03 04

<br /> #menu li:hover .sub-menu {<br />  display: block;<br /> }<br />

Đoạn #menu li:hover .sub-menu nghĩa là khi chúng ta rê chuột vào #menu li thì nó sẽ thực hiện các thay đổi cho .sub-menu.

Thêm một chút CSS cho cái menu con bên trong để nó xóa cái margin không cần thiết đi.

01 02 03 04 05

</p> <p>.sub-menu li {<br />  margin-left: 0 !important;<br /> }</p> <p>

Bèm!

Bạn đã nắm được chưa nào? Nhìn chung cũng đơn giản thôi nhưng hãy cứ thử làm vài lần cho đến khi nào không cần xem tutorial nữa là được, vì nó rất quan trọng sau này khi bắt tay vào làm các giao diện cơ website hoàn chỉnh đó. 

Tạo menu dọc cơ bản

Về cách tạo menu dọc thì chúng ta có thể làm giống như tạo menu ngang, đó là tạo một cái danh sách với <ul> rồi xóa list-style-type cho các thẻ <li> bên trong là được chứ không cần làm nhiều bước như khi làm menu ngang.

Trước tiên là thêm CSS cho #menu ul để thêm màu nền này nọ một xíu cho đẹp, và nhất là bỏ đi mấy cái dấu chấm đầu dòng của danh sách..

01 02 03 04 05 06 07 08

<br /> #menu ul {<br />   background: #8AD385;<br />   width: 250px;<br />   padding: 0;<br />   list-style-type: none;<br />   text-align: left;<br /> }<br />

Sau đó viết CSS cho các thẻ <li> để thêm chiều cao cho nó với height và thêm line-height bằng với chiều cao để nó đứng giữa block.

01 02 03 04 05 06 07 08

<br /> #menu li {<br />   width: auto;<br />   height: 40px;<br />   line-height: 40px;<br />   border-bottom: 1px solid #e8e8e8;<br />   padding: 0 1em;<br /> }<br />

Cuối cùng là viết CSS cho thẻ a bên trong menu, chuyển nó qua thành block và thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.

01 02 03 04 05 06 07 08 09 10

<br /> #menu li a {<br />   text-decoration: none;<br />   color: #333;<br />   font-weight: bold;<br />   display: block;<br /> }<br /> #menu li:hover {<br />   background: #CDE2CD;<br /> }<br />

Kết quả ta có thế này:

Tạo menu dọc có đổ xuống (dropdown)

Để tránh việc sử dụng đến jQuery trong serie CSS cơ bản này nên mình sẽ hướng dẫn bạn làm một menu dọc có đổ xuống nhưng không có hiệu ứng mà là nó sẽ xổ ra bên phải của menu mẹ khi rê chuột vào.

Bây giờ bạn hãy làm lại cái menu đơn giản phía trên và bổ sung các menu con vào

Và sử dụng lại CSS ở phần trên:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

body {<br />  font-family: sans-serif;<br />  font-size: 15px;<br /> }<br /> #menu ul {<br />  background: #8AD385;<br />  width: 250px;<br />  padding: 0;<br />  list-style-type: none;<br />  text-align: left;<br /> }<br /> #menu li {<br />  width: auto;<br />  height: 40px;<br />  line-height: 40px;<br />  border-bottom: 1px solid #e8e8e8;<br />  padding: 0 1em;<br /> }<br /> #menu li a {<br />  text-decoration: none;<br />  color: #333;<br />  font-weight: bold;<br />  display: block;<br /> }<br /> #menu li:hover {<br />  background: #CDE2CD;<br /> }

Bây giờ bạn có thể thấy các menu con trong mục Tin tức bị lỗi hiển thị, nên chúng ta sẽ viết thêm CSS cho nó như sau.

Trước tiên là bạn hãy đưa thằng #menu li về hiển thị kiểurelative.

01 02 03 04

<br /> #menu ul li {<br />  position: relative;<br /> }<br />

Và chuyển #menu .sub-menu (menu cấp 2) về dạng absolute rồi chỉnh vị trí hiển thị của nó thụt sang bên phải là 250px (bằng với chiều rộng menu), đồng thời đưa nó về sát mép top của phần tử mẹ.

01 02 03 04 05 06

<br /> #menu .sub-menu {<br />  position: absolute;<br />  left: 250px;<br />  top: 0;<br /> }<br />

Kết quả là bây giờ nó đã thụt qua một bên rồi.

Ảnh này chưa có thuộc tính top: 0

Bây giờ chỉ cần viết thêm CSS để .sub-menu ẩn đi và hiện ra khi rê chuột vào #menu li có chứa .sub-menu nhé.

01 02 03 04 05 06 07 08 09 10

<br /> #menu .sub-menu {<br />  position: absolute;<br />  left: 250px;<br />  top: 0;<br />  display: none;<br /> }<br /> #menu li:hover .sub-menu {<br />  display: block;<br /> }<br />

Kết quả như dưới.

Đẹp chưa nè? Và mình xin nói thêm là đó chỉ là một menu đơn giản thôi nhưng bạn muốn làm các menu đẹp hơn thì phải rõ cách làm một menu đơn giản như vậy, rồi sau này bạn có thể tham khảo thêm một số tutorial trên mạng để làm theo.