Bài 10: navbar

     

Khi bạn đã sở hữu kỹ năng và kiến thức cơ bản về HTML cùng CSS chúng ta cũng có thể tạo thành được kết cấu của một trang web hoàn hảo và ưa nhìn. Có các vật dụng để triển khai, nhằm kết cấu lên một website hoàn hảo nên trải qua một quá trình lâu hơn. Trong nội dung bài viết này mình vẫn chia sẻ với chúng ta biện pháp tạo thành menu đa cung cấp thực hiện HTML cùng CSS cơ bạn dạng.Quý khách hàng vẫn xem: Cách tạo menu nhiều cấp

Tạo cấu tạo menu nhiều cấp HTML

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


Bạn đang xem: Bài 10: navbar

*

Trong nội dung bài viết này bản thân sẽ áp dụng lại tệp này để thi công một menu nhiều cung cấp. Mình đã viết một đoạn HTML sử dụng thẻ danh sách . Đoạn mã mẫu mã nlỗi sau

*

Xem thêm: Mẫu Powerpoint Báo Cáo Khoa Học, Top +136 Mẫu Powerpoint Báo Cáo

Kết quả tạo ra menu nhiều cung cấp bằng HTML

Thêm CSS cho menu nhiều cấp


*

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

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

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