Navigation Bar css hay còn gọi là thanh menu, được dùng để điều hướng các mục chính của một website.Navigation Bar thường được đặt ở đầu trang web hoặc sau header, giúp website trở nên rõ ràng cũng như giúp người dùng dễ dàng tương tác.
Có 2 loại navigation hay được sử dụng nhất:
- Vertical Navigation - Thanh điều hướng dọc.
- Horizontal Navigation - Thanh điều hướng ngang.
Tạo thanh điều hướng
Có rất nhiều cách để tạo navigation, trong bài học này tienanhvn.com sẽ cùng bạn tìm hiểu cách tạo navigation bằng danh sách sử dụng các thẻ <ul> và <li>.
Ví dụ bạn có thể tạo danh sách gồm các phần tử như hình trên:
<ul>
<li><a href="">Home</a></li>
<li><a href="">Android</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Java</a></li>
</ul>
Tuy nhiên ta nên loại bỏ dấu đầu mục và margin, padding ra khỏi danh sách:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Vertical Navigation - Thanh điều hướng dọc
Để xây dựng một thanh điều hướng theo chiều dọc, bạn tiếp tục định dạng phần tử <a> bên trong danh sách ở ví dụ trên, thêm đoạn code dưới đây vào:
li a {
display: block;
width: 60px;
}
display: block dùng để hiển thị liên kết dưới dạng các phần tử khối, giúp bạn có thể nhấp vào bất cứ đâu trong khối để mở liên kết (không chỉ là nhấp vào văn bản như trước).
Có thể chỉ định chiều rộng, padding, margin… nếu muốn.
Ngoài ra, bạn có thể thiết lập chiều rộng của cả <ul> và tạo ra kết quả tương tự như trên:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Căn chỉnh đường dẫn và thêm đường viền (border) cho navigation
Thêm text-align:center vào <li> hoặc <a> để căn chỉnh đường dẫn nằm vào giữa khối.
Thêm thuộc tính border vào <ul> để 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ì thêm border-bottom vào tất cả phần tử <li> trừ thẻ cuối cùng:
ul {
border: 1px solid #db7093;
}
li {
text-align: center;
border-bottom: 1px solid #db7093;
}
li:last-child {
border-bottom: none;
}
Cố định chiều cao thanh điều hướng dọc
Tạo một thanh điều hướng xác định chiều cao, cố định ở bên trái:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* chiều cao 100% */
position: fixed; /* cố định thanh điều hướng cả khi cuộn để đọc website */
overflow: auto; /* nếu nội dung quá dài sẽ có thêm thanh cuộn để xem phần còn lại */
}
Horizontal Navigation - Thanh điều hướng ngang
Có 2 cách để tạo một thanh điều hướng theo chiều ngang, đó là sử dụng danh sách dạng inline hoặc float.
li {
display: inline;
}
Đồng thời thẻ a
li a{
text-decoration: none;
color: wheat;
padding: 10px 10px;
}
Theo mặc định, <li> là phần tử dạng khối (block), ta đè display: inline, bỏ những dòng ngắt trước và sau mỗi yếu tố, chỉ hiển thị trên một dòng.
Sử dụng Float
Một cách khác để tạo thanh điều hướng ngang là float các phần tử <li> và định dạng bố cục cho các liên kết điều hướng:
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #e9d8f4;
}
No comments:
Post a Comment