RSSJavascript - Jquery - Ajax

[Menu Tutorial] Tạo menu đa cấp với HTML và CSS

Luôn luôn cập nhật những công nghệ mới, các Designer ngày càng chuyên nghiệp và sáng tạo hơn trong thiết kế của mình.

 

Menu là thành phần quan trọng với mọi website. Để tạo ra menu đa cấp (dropdown hoặc dropline) cho có nhiều cách thức khá đơn giản như: tải các open-source (ví dụ superfish menu); dùng một phần mềm (ví dụ: Javascript Menu Master). Tuy nhiên các cách này cũng có các nhược điểm riêng của nó. Loạt bài viết này sẽ cung cấp cho các bạn các kiến thứ về html, css, jquery từ đơn giản đến phức tạp để tạo menu đa cấp cho trang web của mình.

Bài viết chỉ đề cập đến việc tạo menu ở trên trang web (client). Dành cho đối tượng là từ người chưa biết gì về html, css, javascript. Tuy nhiên, biết các kiến thức cơ bản về chúng sẽ dễ nắm bắt các nội dung hơn. 

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:

<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:

<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:

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

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:

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:

Mã css sẽ như sau:

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

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:

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.

Bài tiếp sau trong loạt bài này chúng ta sẽ nói với nhau về dropline menu và thêm một số thuộc tính CSS3.

Mã nguồn đầy đủ cho các nội dung bạn có thể tải ở các link sau:

Đào Ngọc Giang

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu