Cách Tạo Menu Đa Cấp

Khi bạn đã sở hữu kỹ năng cơ bản về HTML và CSS chúng ta có thể tạo thành được cấu trúc của một trang web hoàn hảo và ưa nhìn. Có những sản phẩm để làm, nhằm cấu tạo lên một website hoàn chỉnh đề nghị trải qua một quy trình lâu bền hơn. Trong bài viết này bản thân đang chia sẻ cùng với các bạn cách tạo ra thực đơn đa cấp cho áp dụng HTML và CSS cơ bạn dạng.

Bạn đang xem: Cách tạo menu đa cấp

Tạo cấu tạo menu đa cấp cho HTML

Trong bài viết cuối cùng vào series học tập HTML cơ phiên bản mình đã gồm đưa ra một được một tệp HTML chuẩn. Có một phân vùng cất menu.

Trong bài viết này bản thân đã sử dụng lại tệp này nhằm kiến thiết một thực đơn đa cung cấp. Mình đang viết một đoạn HTML sử dụng thẻ danh sách . Đoạn mã mẫu mã nhỏng sau

Menu số 2 Menu số 2.2 Trong đoạn HTML bạn cũng có thể thấy có rất nhiều danh mục list lặp lại. Mỗi list là một cung cấp sẽ được hiển thị. Các thẻ nhỏ sẽ phía bên trong thẻ của thẻ cha. Thẻ cha sẽ sở hữu được class "nav" những sẽ có class "sub-menu".

Xem thêm: In Total Là Gì - Nghĩa Của Từ Total

Kết trái sản xuất thực đơn nhiều cấp cho bởi HTML

Thêm CSS đến menu đa cấp

Bây giờ đồng hồ mình sẽ thêm CSS để gia công menu nhiều cấp trsinh hoạt phải đẹp mắt và vận động giỏi hơn. Mình sẽ tạo ra một tệp tin có tên style.css và thực hiện phương pháp linked để link css trường đoản cú HTML. Mình đang nhằm file css cùng thỏng mục với html nhé buộc phải trong phần href chỉ việc call thương hiệu file là đủ.

Xem thêm:

Import css áp dụng cách làm linked

Tiếp theo là mnghỉ ngơi tệp css đang tạo và thêm đoạn code sau vào

.nav>li float: left; margin-right: 15px; .nav>li>a text-transform: uppercase; color: red; .nav li position: relative; list-style:none; .nav li a padding: 10px; line-height: 20px; display: inline-block; .nav .sub-menu display: none; position: absolute; top: 0; left: 100%; width: 200px; background-color: #eee; padding: 5px 20px; .nav li:hover>.sub-menu display: block; .nav>li>.sub-menu top: 40px; left: 0; Mình đang phân tích và lý giải từng đoạn như sau:

.nav>li: Css này được vận dụng cho các thẻ ở tức thì dưới thẻ có class là nav. Thuộc tính float: left; để giúp các phần tử nằm trong thuộc 1 hàng, trực thuộc tính margin-right: 15px; để giúp các thành phần biện pháp nhau 15px về phía mặt đề xuất..nav>li>a: Css này ảnh hưởng đến thẻ phía trong thẻ nhỏ của thẻ tất cả class là nav. Thuộc tính text-transform: uppercase; sẽ giúp đỡ cho các đoạn text trong thẻ in hoa lên, color: red; đang cho các text này hiển thị red color..nav li: Css này tác động mang đến toàn bộ những thẻ li nằm trong thẻ tất cả class là nav đông đảo thẻ ko nằm ở dưới thẻ thẻ cất class .nav cũng biến thành bị tác động. Thuộc tính position: relative; để giúp các thẻ không trở nên tác động cùng với bị trí lúc đầu (coi bài: Các trực thuộc tính position trong CSS). list-style:none; sẽ giúp đỡ xóa đi những dấu chấm mang định vào thẻ ..nav li a: Css này ảnh hưởng mang đến tất cả thẻ trong menu. Thuộc tính padding: 10px; giúp những thẻ a này còn có khoảng trống viền là 10px, line-height: 20px; làm chiều cao của dòng tạo thêm 20px giúp text ở giữ lại mẫu, display: inline-block; sẽ giúp đỡ khóa hiện trên mẫu, góp những nằm trong tính không giống hoạt động tốt..nav .sub-menu: Thẻ này đang tác động ảnh hưởng lên những thẻ tất cả class .sub-menu phía trong thẻ gồm class .nav. Thuộc tính display: none; đang làm ẩn đi những thẻ này. position: absolute; để giúp đỡ đến thẻ dính vào thẻ tất cả nằm trong tính relative. top: 0; vẫn cho phần này không có khoản trống bên trên, left: 100%; để giúp đỡ list này ở hoàn toàn về phía bên nên của thẻ cất nó. width: 200px; là chiều rộng lớn của list này, background-color: #eee; là màu nền cho danh sách này, padding: 5px 20px; để giúp nó tạo thành khoản trống trên/dưới là 5px với phải/trái là 20px..nav li:hover>.sub-menu: Css này sẽ được triển khai lúc rê con chuột vào thẻ , Tác cồn lên các thẻ bao gồm class .sub-thực đơn. Thuộc tính display: block; sẽ giúp đỡ khóa hiển thị cùng giúp thẻ thẳng dưới thẻ được rê con chuột vào hiển thị..nav>li>.sub-menu: Css này ảnh hưởng tác động lên các thẻ gồm class .sub-menu. Hai ở trong tính trong đó mình sẽ không nói lại nữa.