Thiết Kế Menu
Màu Sắc Của Liên Kết
Thông thường các trình duyệt sẽ hiển thị màu văn bản của trang với màu đen mặc định #000
và các liên kết sẽ được hiển thị với mà xanh và được gạch dưới. Chúng ta có thể thay đổi màu sắc hiển thị mặc định cho liên kết bằng cách thêm vào đoạn mã sau ở ngay trước dòng comment để đánh dấu vị trí bắt đầu thêm code CSS trang trí cho menu:
...
/* link color */
a, a:hover, a:focus, a:active, a:active:focus {
color: #337ab7;
text-decoration: none;
}
/* menu */
...
Ở trên luật CSS a:hover
dùng để thiết lập màu sắc cho liên kết khi người dùng rê chuột lên liên kết, a:active
dùng để thết lập màu sắc cho liên kết được focus (ví dụ nhờ sử dụng phím tab),a:active
để thiết lập màu sắc cho liên kết đã được người dùng click ít nhất một lần, và a:active:focus
để thiết lập màu cho liên kết đã được click và đang được focus.
Để đơn giản chúng ta sử dụng cùng một màu cho tất cả các loại liên kết được đề cập ở trên. Khi mở trang home.html
trên trình duyệt bạn sẽ thấy kết quả hiển thị của các liên kết trong menu có màu như hình phía dưới đây:
Tạo Style Phần Tử li
Trong tập tin main.css
bạn tìm tới đoạn code chứa luật CSS áp dụng cho phần tử li
của menu liên kết (bộ chọn CSS là #main-menu ul li
), bạn xoá bỏ thuộc tính margin-right
và thay vào đó thểm vào thuộc tính padding
giống như sau:
...
#main-menu ul li {
float: left;
padding: 10px 15px;
}
Tải lại trang trên trình duyệt bạn sẽ thấy kết quả hiển thị như sau:
Tiếp theo chúng ta sẽ thêm style cho phần tử li
để người dùng có thể nhận biết được phần tử li
nào chứa liên kết của trang hiện tại mà họ đang xem. Để dễ hình dung thì bạn có thể xem kết quả hiển thị cuối cùng sau khi thực hiện công việc này trong hình phía dưới:
Để làm điều này thì trước tiên bạn quay trở lại tập tin home.html
và thêm vào class active
cho phần tử li
chứa liên kết tới trang chủ như sau:
...
<li class="active">
<a href="./home.html" title="Trang Chủ">Trang Chủ</a>
</li>
...
Sau đó ở phía sau luật CSS áp dụng cho bộ chọn main-menu ul li
bạn thêm vào luật CSS sau áp dụng cho phần tử li.active
như sau:
...
#main-menu ul li.active {
border: 1px solid #aaa;
border-radius: 4px 4px 0 0;
}
...
Đoạn code trên tạo đường viền cho phần tử li.active
đồng thời cũng sử dụng thuộc tính border-radisu
để thêm hiệu ứng đường viền dạng tròn ở hai góc trên cùng của phần tử này. Tải lại trang để kiểm tra kết quả:
Ngoài ra, chúng ta cùng muốn thêm vào hiệu ứng đường viền nằm phía dưới cho hai phần tử li
còn lại ngoài phần tử đang active (hay đúng hơn là phần tử có class active
), do đó trong đoạn code ngay phía trên đoạn code mới thêm vào ở trên bạn thêm vào luật CSS sau:
...
#main-menu ul li {
...
border-bottom: 1px solid #aaa;
}
...
Tải lại trang để kiểm tra kết quả:
Cuối cùng chúng ta sẽ bỏ hiệu ứng thêm đường viền dưới cùng cho phần tử li.active
bằng cách thêm vào đoạn code CSS áp dụng cho #main-menu ul li.active
luật CSS sau:
...
#main-menu ul li.active {
...
border-bottom: none;
}
Lúc này khi tải lại trang home bạn sẽ thấy kết quả hiển thị như sau:
Trước khi kết thúc bài học tôi muốn bạn cập nhật mã HTML bên trong hai trang about.html
và contact.html
để thêm vào CSS class active
cho phần tử li
chứa liên kết tương ứng của từng trang này.