Bài 34: CSS List và tạo drop menu

1. Cà phê
2. Trà
3. Cô-ca Cô-la

• Cà phê
• Trà
• Cô-ca Cô-la

---

Chức năng HTML và CSS List

Trong HTML, có hai loại chính của danh sách:

• danh sách không có thứ tự (<ul>) - danh sách các mục được đánh dấu bằng những viên đạn
• danh sách có thứ tự (<ol>) - danh sách các mục được đánh dấu bằng số hoặc chữ

Các tính chất danh sách CSS cho phép bạn:

• Đặt dấu mục danh sách khác nhau cho danh sách có thứ
• Đặt dấu mục danh sách khác nhau cho danh sách có thứ tự
• Đặt một hình ảnh như các điểm đánh dấu mục danh sách
• Thêm màu nền cho danh sách và danh mục các

Markers Danh sách mục khác nhau

Các list-style-type tài sản quy định các loại danh mục đánh dấu.

Ví dụ sau đây cho thấy một số dấu mục danh sách có sẵn:

Thí dụ

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

Tất cả Danh sách CSS Thuộc tính

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow
list-style-type	Specifies the type of list-item marker

Các bước tạo drop menu

1. Tạo định dạng HTML

Để tạo ra menu cho trang, người ta thường sử dụng cấu trúc danh sách (các thẻ ul, li) của html. Để làm cho vấn đề được đơn giản, chúng ta sẽ tạo menu gồm có 3 menu-item cấp 1 và 3 menu-item cấp 2 như sau:

1 2 3 4 5 6 7 8 9 10 11

<ul>    <li>Home</li>    <li>Products</li>    <li>Gallery       <ul>          <li>Summer 2012</li>          <li>Everyday</li>          <li>Love</li>       </ul>    </li> </ul>

 Để phân biệt các menu-item có các menu-item con với những menu-item không có con, chúng ta sẽ thêm cho chúng thuộc tính class="parent". Để phân biệt menu với các danh sách khác xuất hiện trên trang, chúng ta sẽ đặt cho thẻ <ul> gốc thuộc tính class="menu". Vậy mã html sẽ thành như sau:

1 2 3 4 5 6 7 8 9 10 11

<ul class="menu">    <li>Home</li>    <li>Products</li>    <li class="parent">Gallery       <ul>          <li>Summer 2012</li>          <li>Everyday</li>          <li>Love</li>       </ul>    </li> </ul>

2. Các kiến thức CSS cơ bản

2.1 Display (block vs inline)

Kiến thức CSS đầu tiên bạn cần phải nắm được là kiến thức về "cách thức hiển thị" của một phần tử HTML ở trên trang web. Trong CSS thuộc tính chi phối cách thức hiển thị của phần tử là thuộc tính display.

Một phần tử HTML hiển thị ở trên trang có 2 dạng cơ bản:

block: Phần tử có kiểu hiển thị block có xu hướng chiều rộng giãn ra bằng độ rộng của phần tử chứa nó. Nó không nằm chung hàng với các phần tử khác (mỗi phần tử block nằm trên 1 hàng dù nó rộng hay hẹp). Và không có liên hệ gì với các dòng văn bản trên trang. Các phần tử html mặc định có kiểu block gồm: <p>,<div>, các thẻ <h1> tới <h6>, <ul>, <li>...

inline: Phần tử có kiểu hiển thị inline có xu hướng chiều rộng co lại vừa nội dung chứa trong nó. Nó giống như một kí tự và bị gắn với dòng văn bản ở trên trang. Các phần tử html mặc định có kiểu inline gồm: <span>, <a>, <i>, <strong>...

Ngoài ra cũng có các kiểu là phối hợp của 2 kiểu trên (inline-block, inline-table).

Áp dụng điều này vào trường hợp menu của chúng ta như thế nào? Như bạn nhận thấy mặc định khi tạo ra thì menu (danh sách) trên nằm dọc (mỗi li nằm 1 dòng). Lí do là các thẻ <li> có kiểu display là block. Chúng ta chỉ cần định dạng cho chúng có kiểu inline (hoặc inline-block) thì ngay lập tức chúng sẽ nằm cùng trên 1 dòng. Đoạn mã CSS đơn giản sẽ như sau:

1 2 3

li {    display: inline-block; }

2.2 CSS Pseudo-classes

Kiến thức tiếp theo liên quan đến các Pseudo-class của CSS. các pseudo-class chi phối các trạng thái khác nhau của các phần tử HTML trên trang. Ví dụ như trạng thái phần tử bị chạm chuột vào sẽ thuộc pseudo-class là :hover.

Ví dụ đoạn mã sau sẽ đổi màu của các phần tử <li> sang màu đỏ khi chạm vào chúng

1 2 3

li:hover {    color: #f00; }

Ngoài hover, còn có nhiều pseudo-classes khác hữu ích. Hiện tại CSS3 cung cấp một tập hợp rất đa dạng pseudo-classes, pseudo-elements tạo thuận lợi cho việc định dạng và tạo hiệu ứng. Các bạn có thể tham khảo tại đây.

2.3 CSS Selector

Ai đã từng làm CSS chắc đều phải biết về grouping selectors và nesting selectors. Nếu chưa biết cũng không sao, ở đây chúng ta sẽ đề cập đến nesting selectors.

Ở các ví dụ trên, chúng ta định dạng cho thẻ <li>, có nghĩa tất cả các thẻ <li> trên trang đều chịu ảnh hưởng. Nếu chúng ta chỉ muốn định dạng cho thẻ <li> nằm trong thẻ <ul class="menu"> chúng ta có thể thực hiện như sau:

1 2 3

ul.menu li:hover {    color: #f00; }

ở ví dụ trên, giữa u.menu và li:hover chúng ta có thể cách nhau 1 hoặc nhiều khoảng trắng. Và dĩ nhiên, các bạn có thể thực hiện "nested" bao nhiêu cấp tùy thích.

2.4 Kết hợp 3 điều trên tạo menu dropdown

Chúng ta sẽ làm các việc sau:

1.       

1.       

1.      Các thẻ <li> cấp 1 nằm cùng hàng (inline)

2.      Các thẻ <li> cấp 2 nằm riêng trên mỗi hàng (block)

3.      Bình thường thẻ <ul> cấp 2 không hiển thị

4.      Khi chạm chuột vào thẻ <li> cấp 1 (mà có con) thì thẻ <ul> cấp 2 là con (đang không hiển thj) sẽ hiện ra.

Mã css sẽ như sau:

1 2 3 4 5 6 7 8 9 10 11 12

ul.menu li {    display:inline-block; } ul.menu li li {    display:block; } ul.menu li ul {    display:none; } ul.menu li:hover ul {    display:block; }

 Cơ bản là như vậy, chúng ta sẽ trang trí thêm một chút cho sinh động và mã CSS sẽ như sau

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

ul.menu li {    display:inline-block;    background: #ddd;    height: 20px;    padding: 5px 10px;    vertical-align: middle; } ul.menu li li {    display:block;    background: #aaa; } ul.menu li ul {    display:none;    padding: 0; } ul.menu li:hover ul {    display:block; }

2.5 Menu nằm dọc

Chúng ta đã tạo một dropdown menu nằm ngang. Giờ chuyển sang nằm dọc như thế nào?

Nhớ lại phần 3.1 chúng ta đã trao đổi về kiểu hiển thị. Muốn có 1 menu nằm dọc thì chỉ cần mỗi thẻ <li> cấp 1 nằm trên 1 dòng là xong. Để làm điều này chúng ta sẽ đặt thuộc tính display cho nó là block. Tuy nhiên khi ấy bạn cần thiết lập độ rộng cụ thể cho mỗi thẻ <li> này. Mã CSS sẽ thay đổi một chút như sau:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

ul.menu li {    background: #ddd;    height: 20px;    width:200px;    padding: 5px 10px;    list-style:none; } ul.menu li li {    display:block;    background: #aaa; } ul.menu li ul {    display:none;    padding: 0;    margin-left:210px;    margin-top:-30px; } ul.menu li:hover ul {    display:block; }

3. Kết luận và Source-code

Chúng ta đã đi một bước nhỏ và tạo ra một dropdown menu đơn giản chỉ với một vài dòng code CSS. Nhiều lập trình viên không nghĩ CSS và HTML là những thứ "lặt vặt không đáng quan tâm". Nhưng có một điều chắc chắn rằng nếu không biết gì về CSS thì dù Javascript giỏi đến mấy cũng khó tạo hiệu ứng cho các thành phần UI trên trang.