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

     

Khi bạn đã có kiến thức cơ bạn dạng về HTML và CSS bạn cũng có thể tạo ra được kết cấu của một trang web hoàn hảo với đẹp mắt. Có các máy để gia công, để cấu trúc lên một trang web hoàn chỉnh buộc phải trải qua một quy trình lâu hơn. Trong bài viết này mình sẽ share cùng với các bạn phương pháp tạo thành thực đơn nhiều cung cấp sử dụng HTML với CSS cơ phiên bản.

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

Tạo kết cấu menu đa cung cấp HTML

Trong bài viết sau cùng vào series học HTML cơ bản tôi đã gồm giới thiệu 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 mình sẽ thực hiện lại tệp này để kiến tạo một menu nhiều cấp cho. Mình đang viết một đoạn HTML thực hiện thẻ list . Đoạn mã mẫu mã nlỗi sau

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

Xem thêm: Cách Đăng Ảnh Full Hd Lên Facebook Bằng Máy Tính Có Thể Bạn Chưa Biết


*
Kết quả tạo thành menu nhiều cấp cho bằng HTML


Thêm CSS mang lại thực đơn nhiều cấp

Bây giờ mình sẽ thêm CSS để làm menu đa cấp trsống phải đẹp cùng hoạt động xuất sắc hơn. Mình sẽ khởi tạo ra một file mang tên style.css và thực hiện phương pháp linked để link css tự HTML. Mình đang để file css cùng tlỗi mục cùng với html nhé buộc phải vào phần href chỉ việc call thương hiệu file là đầy đủ.

Xem thêm: List Danh Sách Forum Đặt Backlink Chất Lượng Dofollow, Danh Sách Forum Đặt Backlink Pr Cao Lên Top Nhanh


*

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


Tiếp theo là msống tệp css đã chế tạo ra cùng 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 sẽ giải thích từng đoạn nlỗi sau:

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