Có điều thanh điều hướng sẽ giúp người dùng dễ sử dụng trang web cho nên nó là điều quan trọng đối với bất kỳ trang web nào
Với CSS, bạn có thể biến đổi các menu HTML nhàm chán thành các thanh điều hướng đẹp mắt
1. Thanh điều hướng bằng danh sách các liên kết
Thanh điều hướng cần có HTML tiêu chuẩn làm cơ sở
Ví dụ:
Ở ví dụ này, tôi sẽ xây dựng thanh điều hướng từ một danh sách HTML tiêu chuẩn. Thanh điều hướng về cơ bản là một danh sách các liên kết, vì vậy việc sử dụng các phần tử <ul> và <li> hoàn toàn hợp lý
Chúng ta có thể xóa dấu đầu dòng, lề và phần đệm khỏi danh sách bằng cách sử dụng CSS:
Ở đây, list-style-type: none;- xóa đánh dấu đầu dòng . Thanh điều hướng không cần các điểm đánh dấu danh sách
Đặt margin: 0; và padding: 0; xóa cài đặt mặc định của trình duyệt
2. Thanh điều hướng dọc trong CSS
Để tạo một thanh điều hướng dọc, bạn có thể tạo kiểu cho các phần tử <a> bên trong danh sách
Ở ví dụ trên, tôi sử dụng:
- display: block; – Hiển thị các liên kết dưới dạng phần tử khối làm cho toàn bộ khu vực liên kết có thể nhấp được (không chỉ văn bản) và nó cho phép tôi chỉ định chiều rộng (và phần đệm, lề, chiều cao, v.v. nếu muốn)
- width: 60px;- Các phần tử khối chiếm toàn bộ chiều rộng có sẵn theo mặc định. Tôi muốn chỉ định chiều rộng 60 pixel
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 được 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ước của chúng tôi
Ví dụ về thanh điều hướng dọc:
Ở ví dụ trên, tôi sử dụng:
- text-align:center vào <li> hoặc <a> để căn giữa các liên kết
- thuộc tính border để <ul> thêm đường viền xung quanh thanh điều hướng
- Nếu bạn cũng muốn các đường viền bên trong thanh điều hướng, hãy thêm
border-bottom vào tất cả các phần tử <li>, ngoại trừ phần tử cuối cùng
Bạn cũng có thể đặt thanh điều hướng cố định có chiều cao đầy đủ bằng cách như sau:
Lưu ý: Ví dụ này có thể không hoạt động bình thường trên thiết bị di động
3. Thanh điều hướng ngang tong CSS
Có 2 cách cơ bản để tạo thanh điều hướng ngang là sử dụng các mục danh sách inline hoặc floating
- Mục danh sách inline
Ví dụ:
Ở đây, tôi sử dụng display: inline; – Theo mặc định, phần tử <li> là phần tử khối,
xóa các dấu ngắt dòng trước và sau mỗi mục danh sách, để hiển thị chúng trên một dòng
- Mục danh sách floating
Ví dụ:
Ở đây, tôi sử dụng :
- float: left; – Sử dụng float để có được các phần tử khối để nổi cạnh nhau
- display: block; – Cho tôi chỉ định khoảng đệm (và chiều cao, chiều rộng, lề, …v.v. nếu bạn muốn)
- padding: 8px; – Chỉ định một số phần đệm giữa mỗi phần tử <a> để làm cho chúng trông đẹp mắt
- background-color: #dddddd; – Thêm màu nền xám cho từng phần tử <a>
Mẹo: Thêm màu nền vào <ul> thay vì từng phần tử <a> nếu bạn muốn có màu nền toàn chiều rộng
Ví dụ về thanh điều hướng ngang
Bạn cũng có thể sử dụng thanh điều hướng cố định ngay cả khi cuộn trang bằng cách sau:
4. Thanh điều hướng thả xuống trong CSS
HTML ) Ta có thể sử dụng bất kỳ phần ử nào đ? mở n dung thả xuống, ví dụ như: phần tử <span> hoặc <button>
Sử dụng một phần tử vùng chứa (như <div>) để tạo nội dung thả xuống và thêm bất cứ thứ gì bạn muốn vào bên trong nó
Cho phần tử <div> xung quanh các phần tử để định vị nội dung thả xuống một cách chính xác với CSS
CSS ) Lớp .dropdown sử dụng position:relative, đó là cần thiết khi chúng ta muốn các nội dung thả xuống để được đặt ngay bên dưới nút thả xuống (sử dụng position:absolute)
Lớp .dropdown-content giữ nội dung thả xuống thực tế. Nó bị ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Lưu ý rằng min-width được đặt thành 160px. Hãy thay đổi điều này. Mẹo: Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt thành width100% (và overflow:auto cho phép cuộn trên màn hình nhỏ)
Thay vì sử dụng đường viền, chúng tôi đã sử dụng thuộc tính CSS box-shadow để làm cho menu thả xuống trông giống như một “thẻ”
Bộ chọn :hover được sử dụng để hiển thị menu thả xuống khi người dùng di chuyển chuột qua nút thả xuống
Ví dụ:
