Tôi đang cố gắng để thực hiện một menu với các tính năng sau:Để tìm kiếm một menu thả xuống hoàn hảo: kéo dài đến chiều rộng đầy đủ, các mục có chiều rộng bằng nhau, CSS thuần túy. Xin vui lòng giúp giải quyết một trục trặc
- ngang;
- các mục menu có chiều rộng bằng nhau;
- các mục menu trải rộng trên toàn bộ chiều rộng trang (không chỉ là đám đông ở phía bên trái);
- động (quy tắc css không nên dựa vào số lượng mục được xác định trước);
- thả xuống cấp thứ hai với các mục được căn chỉnh theo chiều dọc;
- CSS nguyên bản (không có JS!).
Điều này dường như mô tả một menu hoàn hảo như tôi thấy.
Tôi đã gần như succeded làm cho nó bằng cách sử dụng kỹ thuật đẹp display: table-cell; (tags bị bỏ qua vì đơn giản):
<ul>
<li>Menu item</li>
<li>
Expandable ↓
<ul>
<li>Menu</li>
<li>Menu item</li>
<li>Menu item long</li>
</ul>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
ul {
display: table;
table-layout: fixed;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:nth-child(even){
background-color: lightblue;
}
li:nth-child(odd){
background-color: lightskyblue;
}
li ul { display: none; }
li:hover ul {
display: block;
position: absolute;
}
li:hover ul li {
display: block;
}
Vấn đề duy nhất là mục menu con xuất hiện toàn bộ chiều rộng trang và một phần bên ngoài trình duyệt cửa sổ, buộc thanh cuộn ngang xuất hiện:
Gah! StackOverflow sẽ không cho phép tôi đăng hình ảnh. Hãy thử nghiệm trực tiếp trên JSFiddle: http://jsfiddle.net/6PTpd/9/
Tôi có thể khắc phục điều này bằng cách thêm float: left; clear: both; vào li:hover ul li. Nhưng khi tôi làm, các mục menu con có độ rộng khác nhau:
Fiddle: http://jsfiddle.net/6PTpd/10/
... hoặc chiều rộng width: 15%;: http://jsfiddle.net/6PTpd/12/
Cả sửa là xấu xí và giải quyết vấn đề không phải chiều rộng bình đẳng cũng không phải vấn đề thanh cuộn ngang .
UPD Trong khi đánh răng lên bài này tôi đã tìm thấy một số giải pháp của vấn đề thanh cuộn: set li:hover ul chiều rộng để 0. Nhưng lực lượng này để spectify chiều rộng của mục menu con trong một giá trị tuyệt đối. :(Xem http://jsfiddle.net/6PTpd/13/
Ngoài ra, giải pháp này có thể hút khó khi mục trình đơn cuối cùng được mở rộng Tùy thuộc vào độ rộng màn hình, nó vẫn có thể thổi trang rộng hơn so với cửa sổ:. http://jsfiddle.net/6PTpd/15/
Câu hỏi:
- làm thế nào để tôi làm cho các mục menu con xuất hiện cùng độ rộng như cha mẹ của họ và không cho phép các thanh cuộn ngang?
- có một kỹ thuật CSS cho phép tạo ra một menu với TẤT CẢ các điều kiện tiên quyết s được mô tả ở đầu bài viết?
Tôi đã tìm thấy rất nhiều ví dụ, nhưng chúng không kéo dài (nổi các mục bên trái) hoặc không động (sử dụng các kích thước được lấy từ số mục được xác định trước, e. G.width: 20% cho mỗi mục trong năm mục đầu tiên hoặc thậm chí tệ hơn, sử dụng kích thước tuyệt đối!).
Xin cảm ơn Timothy! Giải pháp này là hoàn hảo. –
Giải pháp được đề xuất bởi bạn ALREADY hoạt động trên máy tính bảng! Bạn chỉ cần tạo mục có thể mở rộng ở cấp cao nhất không thể nhấp được. : D –
Ah, tốt. Tôi rất vui. Thiết kế đẹp, bằng cách này, những màu xanh trông khá đẹp với nhau. –