Hướng dẫn tạo menu đa cấp bằng css

lúc bạn đã sở hữu kiến thức cơ phiên bản về HTML với CSS bạn cũng có thể tạo ra được kết cấu của một website hoàn chỉnh cùng ưa nhìn. Có những thiết bị để làm, để cấu tạo lên một trang web hoàn hảo đề nghị trải qua một quá trình lâu dài. Trong nội dung bài viết này bản thân vẫn share với các bạn bí quyết tạo nên menu đa cấp cho sử dụng HTML với CSS cơ bản.

Bạn đang xem: Hướng dẫn tạo menu đa cấp bằng css

Tạo cấu trúc menu đa cung cấp HTML

Trong nội dung bài viết sau cùng vào series học HTML cơ bản tôi đã có đưa ra một được một tệp HTML chuẩn chỉnh. Có một phân vùng cất thực đơn.

*

Trong bài viết này mình đã sử dụng lại tệp này nhằm xây cất một menu đa cấp. Mình sẽ viết một đoạn HTML sử dụng thẻ list . Đoạn mã mẫu nlỗi 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 sách danh sách tái diễn. Mỗi danh sách là một trong cấp cho sẽ tiến hành hiển thị. Các thẻ nhỏ đang nằm trong thẻ của thẻ cha. Thẻ thân phụ sẽ sở hữu được class "nav" các sẽ có class "sub-menu".

Xem thêm: Hướng Dẫn Làm Mục Lục Tự Động Trong Word 2010, 2013, 2016, 2019 Nhanh


*
Kết trái tạo nên menu đa cấp bằng HTML


Thêm CSS đến thực đơn đa cấp

Bây tiếng bản thân vẫn thêm CSS để làm thực đơn đa cấp trsinh sống đề xuất đẹp mắt cùng vận động xuất sắc hơn. Mình sẽ tạo nên ra một file có tên style.css cùng thực hiện phương pháp linked nhằm link css tự HTML. Mình vẫn để tệp tin css thuộc thư mục cùng với html nhé buộc phải trong phần href chỉ việc hotline tên tệp tin là đủ.

Xem thêm: Hướng Dẫn Tạo File Ghost Trên Máy Ảo Vmware Workstation, Cách Tạo File Ghost Chuẩn Uefi


*

Import css sử dụng cách tiến hành linked


Tiếp theo là mở tệp css vẫn 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ẽ lý giải từng đoạn nhỏng sau:

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

Chuyên mục: Hướng Dẫn - Hỏi Đáp