Thanh điều hướng trong CSS

Demo: các thanh điều hướng

Các thanh điều hướng

Đơn giản hóa thanh điều hướng là việc quan trọng trong mỗi website. Với CSs bạn có thể biến các thanh menu nhàm chán trông đẹp mắt hơn.

Thanh điều hướng = danh sách các link

Thanh điều hướng cần dựa trên HTML chuẩn. Trong các ví dụ sau cũng xây dựng thanh điều hướng dựa vào danh sách HTML tiêu chuẩn.

Về cơ bản thanh điều hướng là danh sách các đường dẫn, vì thế sử dụng phần tử <ul> và <li> để tạo sự hoàn hảo nhất:

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Bây giờ loại bỏ dấu đầu mục và margin, padding khỏi danh sách:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Giải thích ví dụ:

• list-style-type: none; – loại bỏ các dấu đầu mục. Thanh điều hướng không cần dấu này.
• Thiết lập margin: 0; and padding: 0; để loại bỏ cài đặt mặc định trình duyệt.

Đoạn mã trong ví dụ trên là mã tiêu chuẩn dành cho cả thanh điều hướng theo chiều ngang và chiều dọc.

Thanh điều hướng theo chiều dọc

Để xâu dựng một thanh điều hướng theo chiều dọc, bạn cần định dạng phần tử <a> bên trong danh sách, thêm đoạn mã dưới đây vào:

li a {
    display: block;
    awidth: 60px;
}

Giải thích ví dụ:

• display: block; – Hiển thị các liên kết dưới dạng các phần tử khối làm cho toàn bộ liên kết có thể nhấp vào (không chỉ là văn bản) và cho phép chỉ định chiều rộng (và padding, margin, … nếu bạn muốn)
• awidth: 60px; – Các phần tử khối chiếm toàn bộ chiều rộng có sẵn theo mặc định. Chỉ định chiều rộng 60 pixel.

Bạn có thể thiết lập chiều rộng của <ul> và loại bỏ chiều rộng của <a>, vì chúng sẽ chiếm toàn bộ chiều rộng khi hiển thị dưới dạng các phần tử khối. Điều này sẽ tạo ra kết quả tương tự như ví dụ trên:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    awidth: 60px;
} 

li a {
    display: block;
}

Ví dụ thanh điều hướng cho chiều dọc

Tạo một thanh điều hướng theo chiều dọc đơn giản với màu nền là màu nâu và thay đổi màu nền của đường dẫn khi người dùng rê chuột vào đó:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    awidth: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

Đường dẫn điều hướng hiện tại

Thêm “active” vào đường dẫn hiện tại để người dùng biệt trang họ đang xem:

.active {
    background-color: #4CAF50;
    color: white;
}

Căn giữa đường dẫn và thêm viền

Thêm text-align:center vào <li> hoặc <a> để căn giữa đường dẫn. Thêm thuộc tính border vào <ul> để thêm viền quanh thanh điều hướng. Nếu bạn cũng muốn đường viền bên trong thanh điều hướng, thêm border-bottom vào tất cả phần tử <li>, trừ thẻ cuối cùng:

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Thanh điều hướng theo chiều dọc cố định chiều cao

Tạo một thanh điều hướng có chiều cao tối đa, cố định ở bên trái:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    awidth: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Lưu ý: ví dụ trên không tương thích trên điện thoại di động.

Thanh điều hướng theo chiều ngang

Có 2 cách để tạo một thanh điều hướng theo chiều ngang, sử dụng danh sách inline hoặc floating.

Danh sách inline

Một trong các cách để tạo một thanh điều hướng theo chiều ngang đó là xác định phần tử trên cùng một dòng, thêm mã chuẩn như dưới đây:

li {
    display: inline;
}

Giải thích ví dụ:

• display: inline; – Mặc định phần tử <li> là phần tử khối. Ở đây ta sẽ bỏ những dòng ngắt trước và sau mỗi danh sách, chỉ hiển thị trên một dòng.

Danh sách floating

Một cách nữa để tạo thanh điều hướng theo chiều ngang đó là thay đổi phần tử <li> và xác định bố cục của đường dẫn điều hướng:

li {
    float: left;
}

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Giải thích ví dụ:

• float- left; – sử dụng float để các phần tử khối trượt cạnh nhau
• display: block; – Hiển thị các liên kết dưới dạng các phần tử khối làm cho toàn bộ vùng liên kết có thể nhấp (không chỉ là văn bản) và cho phép chỉ định padding (chiều cao, chiều rộng, margin, vv nếu bạn muốn)
• padding: 8px; – Vì các phần tử khối chiếm toàn bộ chiều rộng sẵn có, chúng không thể trượt bên cạnh nhau. Vì vậy, chỉ định một số padding để làm cho chúng trông đẹp mắt hơn.
• background-color: #dddddd; – thêm nền màu xám vào mỗi phần tử

Mẹo: thêm màu nên vào <ul> thay vì mỗi phần tử <a> nến bạn muốn màu nền toàn bộ chiều rộng.

ul {
    background-color: #dddddd;
}

Ví dụ thanh điều hướng theo chiều ngang

Tạo thanh điều hướng ngang cơ bản với màu nền tối và thay đổi màu nền của liên kết khi người dùng rê chuột vào:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

Đường dẫn điều hướng hiện tại

Thêm “active” và đường dẫn hiện tại để người dùng biết họ đang xem trên link nào:

.active {
    background-color: #4CAF50;
}

Căn phải đường dẫn

Căn phải đường dẫn bở floating để danh sách ở phía tay phải (float:right; ):

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Chia thanh điều hướng bằng đường viền

Thêm thuộc tính border-right vào <li> để tạo đường dẫn được phần chia bằng đường viền:

/* Add a gray right border to all list items, except the last item (last-child) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

Thanh điều hướng cố để

Để tạo thanh điều hướng cố định phía trên hoặc phía dưới trang web, ngay cả khi người dùng cuộn chuột:

Fixed Top

ul {
    position: fixed;
    top: 0;
    awidth: 100%;
}

Fixed Bottom

ul {
    position: fixed;
    bottom: 0;
    awidth: 100%;
}

Lưu ý: ví dụ có thể không tương thích trên phiên bản mobile.

Thanh điều hướng theo chiều ngang màu xám

Một ví dụ về thanh điều hướng ngang màu xám với đường viền xám mỏng:

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}