Trang chủ
CSS
Thanh điều hướng CSS
Thanh điều hướng ngang
Dùng thử: Ví dụ về sidenav đáp ứng
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> body {margin: 0;} ul.sidenav { list- kiểu kiểu: không có; lề: 0; phần đệm: 0; chiều rộng: 25%; màu nền: #f1f1f1; vị trí: cố định; chiều cao: 100%; tràn: tự động; } ul.sidenav li a { display: block; màu: #000; phần đệm: 8px 16px; trang trí văn bản: không có; } ul.sidenav li a.active { màu nền: #4CAF50; màu trắng; } ul.sidenav li a:hover:not(.active) { Background-color: #555; màu trắng; } div.content { lề trái: 25%; phần đệm: 1px 16px; chiều cao: 1000px; } @media screen và (max-width: 900px) { ul.sidenav { width: 100%; chiều cao: tự động; vị trí: tương đối; } ul.sidenav li a { float: left; phần đệm: 15px; } div.content {margin-left: 0;} } @media screen và (max-width: 400px) { ul.sidenav li a { text-align: center; phao: không có; } } </style> </head> <body> <ul class="sidenav"> <li><a class="active" href="#home">Trang chủ</a></li> <li> <a href="#news">Tin tức</a></li> <li><a href="#contact">Liên hệ</a></li> <li><a href="#about" >Giới thiệu</a></li> </ul> <div class="content"> <h2>Ví dụ về Sidenav đáp ứng</h2> <p>Ví dụ này sử dụng truy vấn phương tiện để chuyển đổi sidenav thành thanh điều hướng trên cùng khi kích thước màn hình là 900px trở xuống.</p> <p>Chúng tôi cũng đã thêm truy vấn phương tiện cho các màn hình có kích thước 400px trở xuống. Truy vấn này sẽ xếp chồng và căn giữa các liên kết điều hướng theo chiều dọc.</p> <p>Bạn sẽ tìm hiểu tìm hiểu thêm về truy vấn phương tiện và thiết kế web đáp ứng sau trong Hướng dẫn CSS của chúng tôi.</p> <h3>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</h3> </div> </body> </html>