Tạo thanh điều hướng trong CSS - CSS Navigation Bar

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    489 lượt xem


Navigation Bar là một thành phần không thể thiếu của một trang web bất kỳ, với CSS bạn có thể biến Navigation Bar nhàm chán trở nên đẹp mắt.

Navigation Bar = List các Links

Navigation bar cần có HTML tiêu chuẩn làm cơ sở.

Trong các ví dụ của chúng tôi, chúng tôi sẽ xây dựng navigation bar từ HTML list.

Navigation bar về cơ bản là một danh sách các link, vì vậy việc sử dụng các element <ul> và <li> là hoàn toàn hợp lý:

<ul>    <li><a href="/">Trang chủ</a></li>    <li><a href="/tin-tuc.html">Tin tức</a></li>    <li><a href="/lien-he.html">Liên hệ</a></li>    <li><a href="/ve-chung-toi.html">Về chúng tôi</a></li>  </ul>

Bây giờ chúng ta hãy xóa dấu đầu dòng, margin và padding ra khỏi list:

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

 

Vertical Navigation Bar

Để tạo vertical navigation bar, bạn có thể tạo kiểu cho các element <a> bên trong danh sách từ code ở trên:

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

Bạn cũng có thể đặt chiều rộng của <ul> và xóa chiều rộng của <a>, vì chúng sẽ chiếm toàn bộ chiều rộng có sẵn khi hiển thị dưới dạng các element block. Điều này sẽ tạo ra kết quả tương tự như ví dụ trước của chúng tôi:

ul {    list-style-type: none;    margin: 0;    padding: 0;    width: 60px;  }    li a {    display: block;  }

 

Ví dụ tạo Vertical Navigation Bar

Tạo vertical navigation bar với màu nền xám và thay đổi màu nền của các liên kết khi người dùng di chuyển chuột qua chúng:

ul {    list-style-type: none;    margin: 0;    padding: 0;    width: 200px;    background-color: #f1f1f1;  }    li a {    display: block;    color: #000;    padding: 8px 16px;    text-decoration: none;  }    li a:hover {    background-color: #555;    color: white;  }

 

Active/Current Navigation Link

Thêm một class "active" vào link hiện tại để cho người dùng biết họ đang truy cập trang nào:

.active {    background-color: #04AA6D;    color: white;  }

 

Căn giữa Links & Thêm Borders

Thêm text-align: center vào <li> hoặc <a> để căn giữa các link.

Thêm thuộc tính border vào <ul> để thêm border xung quanh thanh điều hướng. Nếu bạn cũng muốn các border bên trong navigation bar, hãy thêm border dưới cùng cho tất cả các element <li>, ngoại trừ element cuối cùng:

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

 

Full-height Fixed Vertical Navbar

Tạo điều hướng bên "sticky" có chiều cao đầy đủ:

ul {    list-style-type: none;    margin: 0;    padding: 0;    width: 25%;    background-color: #f1f1f1;    height: 100%;    position: fixed; /* Làm cho nó dính, ngay cả khi cuộn */    overflow: auto; /* Bật cuộn nếu có quá nhiều nội dung */  }

Lưu ý: Ví dụ này có thể không hoạt động bình thường trên thiết bị di động.

Horizontal Navigation Bar

Có hai cách để tạo horizontal navigation bar. Sử dụng inline hoặc inline-block cho list items.

Inline List Items

Một cách để tạo horizontal navigation bar là chỉ định các element <li> dưới dạng inline, ngoài code từ trang trước:

li {    display: inline;  }

 

Floating List Items

Một cách khác để tạo horizontal navigation bar là làm nổi các element <li> và chỉ định bố cục cho các liên kết điều hướng:

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

Mẹo: Thêm màu nền vào <ul> thay vì từng element <a> nếu bạn muốn có màu nền toàn chiều rộng:

ul {    background-color: #dddddd;  }

 

Ví dụ tạo Horizontal Navigation Bar

Tạo horizontal navigation bar cơ bản với màu nền tối và thay đổi màu nền của các liên kết khi người dùng di chuyển chuột qua chúng:

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;  }

 

Active/Current Navigation Link

Thêm một class "active" vào link hiện tại để cho người dùng biết họ đang truy cập trang nào:

.active {    background-color: #04AA6D;  }

 

Right-Align Links

Căn phải các link bằng cách thả nổi các mục danh sách sang bên phải (float: right;):

<ul>    <li><a href="/">Trang chủ</a></li>    <li><a href="/tin-tuc.html">Tin tức</a></li>    <li><a href="/lien-he.html">Liên hệ</a></li>    <li style="float:right"><a class="active" href="/ve-chung-toi.html">Về chúng tôi</a></li>  </ul>

 

Border Dividers

Thêm thuộc tính border-right vào <li> để tạo các dải phân cách link:

li {    border-right: 1px solid #bbb;  }    li:last-child {    border-right: none;  }

 

Fixed Navigation Bar

Đặt navigation bar ở đầu hoặc cuối trang, ngay cả khi người dùng cuộn trang:

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

Lưu ý: Position fixed có thể không hoạt động bình thường trên thiết bị di động.

Gray Horizontal Navbar

Ví dụ về horizontal navbar màu xám với đường viền mỏng màu xám:

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

 

Sticky Navbar

Thêm position: sticky; cho <ul> để tạo một thanh navbar dính.

ul {    position: -webkit-sticky; /* Safari */    position: sticky;    top: 0;  }

Lưu ý: Internet Explorer không hỗ trợ position sticky. Safari yêu cầu tiền tố -webkit- (xem ví dụ ở trên). Bạn cũng phải chỉ định ít nhất một trong số top, right, bottom hoặc left để định vị cố định hoạt động.


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.