Chúng ta sẽ đi vào việc tạo menu Html cơ bản thông qua các phần tử html và các bước cần quan tâm trong việc tạo menu Html nha!
I. Tạo danh sách thô
Trước tiên chúng phải có danh sách thô các thành phần cần có trong menu.
<ul>
<li> Xã hội </li>
<li> Kinh tế </li>
<li> Công nghệ </li>
</ul>
- Ở đây mình thêm các thuộc tính màu để ta dễ hình dung khoản không mà các phần từ chiếm hữu.
- Các bạn chú ý thấy có các chấm đen ở đầu không, đó là do mặc định của phần tử ul.
Ta đã nói menu thật ra chỉ là một danh sách có chứa các liên kết đên nội dung khác. Vậy để thêm các liên kết cho các thành phần trong danh sách trên (Xã hội, Kinh tế, Công nghệ) thì ta sử dụng phần tử a và thuộc tính href của nó.
<a href= ” … ”>…..</a>
Ta sẽ chèn phần tử a này vào trong phần tử li
<li><a href=” đường dẫn”> Xã hội </a></li>
- Ở đây mình đã ẩn các thuộc tính màu nền để các bạn dễ thấy là ở mõi thành phần thêm liên kết điều có dấu gạch bên dưới. Đó là mặc định của phần tử liên kết a
- Ngoài thuộc tính href phần tử a còn có thuộc tính target để điều chỉnh nội dung liên kết sẽ được hiện tại của sổ hiện tại hay cửa sổ mới. Thương thì với menu ta sẽ để cho nội dung liên kết mở ở cửa sổ hiện tại nên không cần thêm thuộc tính target
Ta thấy menu thô của chúng ta có 3 phần tử ul, li, a. Chúng ta sẽ xử lý từng phần từ. Bằng cách thêm bớt các thuộc tính
a. Xóa các dấu châm đầu thành phần danh sách
Để xóa nó ta chuyên thuộc tính list-style-type và chọn giá trị nó là none
ul { list-style-type:none}
b. Thêm thuộc tính Css trang trí
Các thuộc tính màu và khoảng cách giữa khung do phần từ ul tạo với mọi thứ xung quanh: thì ta dùng các thuộc tính Css như background, padding, margin để thiết lặp, đê menu thêm đẹp
Ta biết phần từ li là phần từ dạng Block. Nghĩa là mõi phần tử sẽ nằm trên 1 hàng. Nên nếu muốn tạo menu ngang thì chúng ta cần phải chuyển các phần tử Bllock kia nằm trên cùng 1 hàng
Bạn có thể chọn 2 cách sau để thực hiện việc đó
a. Sử dụng thuộc tính display:
li {display:inline-block;}
Ở đây chúng ta sử dụng inline-block thay vì inline là do: Chúng ta cần chuyển các phần tử li về cùng 1 hàng (dùng inline), đồng thời muốn thay đổi các thuộc tính kích thướt của nó (block).
b. Sử dụng thuộc tính float:
li {float:left;}
Nhưng khi sử dụng float chúng ta phải clear float thông qua thuôc tính overflow:hidden. Chú ý thuộc tính css này phải được để vào phần tử bao bọc các thẻ cần float( trường hợp này ta đang float thẻ li và bao bộc nó chính là ul).
ul {overflow:hidden;}
3. Xử lý phân tử a trong meun html
a. Xóa gạch chân
Ta thấy các nội dung bên trong phần tử a sẽ có dấu gạch chân. Chúng ta phải cần phải xóa nó, để cũng được nhưng xóa nó sẽ đẹp hơn.Ta xóa gạch chân như sau
li a {text-decoration:none}
b. Chuyển các phần từ a về dạng lock
Để nó nằm trọn trong vùng của thẻ li, và ta có thể thay đổi được các thuộc tính kích thướt của nó
a { display:block}
c.Tạo hiệu ứng chuyển màu
Để khi người khác ghê chuột vào thì các thành phần sẽ chuyển sang màu khác. Bạn có cói thể chọn chuển màu text hoặc chuyển màu nền.
li a:hover{color:red}
Chú ý ở đây mình chọn cách thêm css vào Htlm thông qua phần tử style. Ngoài ra ta có thể viết trực tiếp vào phần tử. Hay viết ở 1 file css riêng và chèn vào Html thông qua phần tử list
Hi vọng bài viết hữu ích với bạn!
