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.