Cách tạo menu xổ dọc trong html

Giới thiệu

Trải nghiệm người tiêu dùng cùng thời gian load time là quan trong. Vì vậy, các bạn không nên cyếu các JavaScript hoặc hình to vào wesbite. Nếu hy vọng bao gồm một thanh hao thực đơn CSS đẹp mắt thì sao? Không bắt buộc thực hiện JavaScript đâu chúng ta, thời buổi này cảm giác xổ xuống hoàn toàn có thể được chế tạo ra chỉ vày CSS. Trong bài xích lý giải này, các bạn sẽ được giải đáp nhằm chế tạo ra menu CSS dropdown đơn giản và dễ dàng.

Bạn đang xem: Cách tạo menu xổ dọc trong html

quý khách đề xuất gì?

Trước Khi bước đầu bạn phải chuẩn bị:

Truy cập được vào control panel hosting của bạn

Cách 1 — Tạo file HTML

Trước hết bạn cần tạo nên một tệp tin HTML trắng. Trong giải đáp này chúng tôi sẽ tạo nên file mang tên thực đơn.html. Chúng tôi sử dụng File Manager mang lại việc này. Tuy nhiên, bạn cũng có thể có upload qua 1 FTP.. client (chế tạo thực đơn.html bên trên laptop với upload lên máy).

Xem thêm: Hướng Đi Mới Cho Trung Tâm Học Tập Cộng Đồng Cấp Xã, Hướng Đi Mới Cho Trung Tâm Học Tập Cộng Đồng

*

Cách 2 — Thêm mã Menu HTML

Menu của công ty chúng tôi được sản xuất vì chưng mục đó là Main thực đơn với 5 mục bé. Bằng bí quyết đổi tác động URL bên trong href attribute chúng ta cũng có thể links Child Menu tới một trang khác trong trang web của công ty. Quý Khách rất có thể đã nhận ra mỗi mục có một class khác nhau – dropdown, mainmenubtn và dropdown-child. Class rất cần được áp dụng nhằm chế tạo CSS rules không giống nhau.

Xem thêm: Tuyển Dụng, Tìm Việc Làm Ca Sáng Tai Tại Thành Phố Hồ Chí Minh


Main menu
Child menu 1 Child thực đơn 2 Child menu 3 Child thực đơn 4 Child thực đơn 5
Đây là hình Menu HTML nhưng mà không tồn tại CSS rules:

*

Như bạn thấy HTML thực đơn không được về tối ưu và trông có vẻ không tốt. Tuy nhiên, Shop chúng tôi đã vận dụng CSS rules cùng đổi nó nghỉ ngơi bước sau.

Bước 3 — Áp dụng Menu CSS và chế tác cảm giác Dropdown:

Chúng tôi đang làm đẹp HTML code của bản thân bởi CSS rules sau

.mainmenubtn background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px;.mainmenubtn:hover background-color: red; .dropdown position: relative; display: inline-block;.dropdown-child display: none; background-color: black; min-width: 200px;.dropdown-child a color: white; padding: 20px; text-decoration: none; display: block;.dropdown:hover .dropdown-child display: block;Nlỗi chúng ta thấy .dropdown-child gồm CSS rule display: none. Tuy nhiên, ngay khi người tiêu dùng di con chuột cho tới (.dropdown:hover) mục bao gồm, CSS rule vẫn biến đổi display: block. Việc này sẽ tạo nên cảm giác thanh khô thực đơn xổ xuống


Chuyên mục: Blogs