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.