Làm cách nào để tạo menu trong HTML mà không cần sử dụng Javascript?

Question

Kể từ nhiều năm một tiêu chuẩn GUI là các thanh menu của các ứng dụng có menu bật lên, nếu bạn nhấp hoặc di chuột vào một mục trong thanh menu. Một số trang web cũng triển khai tính năng này, nhưng chúng đang sử dụng Javascript, theo như tôi thấy. Vì những lý do khác nhau Javascript có thể là một vấn đề, do đó, câu hỏi: Có thể thực hiện mà không có Javascript, chỉ sử dụng HTML và CSS không?

Answer 1

Tôi đã thực hiện một cái gì đó như thế này trước đây, và đó là một mẹo kéo ra bằng cách đặt các mục menu trong thẻ neo, với menu phụ trong div ẩn ẩn INSIDE những thẻ neo. Thủ thuật CSS là làm cho div bên trong xuất hiện trong sự kiện a: hover.

Nó trông giống như sau:

<style> 
    A DIV { display: none; } 
    A:hover DIV { display: block; } 
</style> 
<a href="blah.htm"> 
    Top Level Menu Text 
    <div><ul> 
     <li><a href="sub1.htm">Sub Item 1</a></li> 
     <li><a href="sub2.htm">Sub Item 2</a></li> 
     <li><a href="sub3.htm">Sub Item 3</a></li> 
    </ul></div> 
</a> 

Mileage của bạn có thể thay đổi ...

EDIT: Internet Explorer 6 và thấp hơn không hỗ trợ: hover pseudo-class trên các yếu tố khác ngoài A. Trong nhiều trình duyệt 'hiện đại' hơn, nó được chấp nhận để có thể sử dụng thủ thuật này với LI, TD, DIV, SPAN và hầu hết mọi thẻ.

Answer 2

Bạn có thể sử dụng bút giả: di chuột để có hiệu ứng di chuột.

a:link { 
color: blue; 
} 

a:hover { 
    color: red; 
} 

Tôi có thể đưa ra một ví dụ rộng hơn nhưng không phải ngay bây giờ (cần đưa con đến nha sĩ).

Answer 3

Hãy xem CSS Menu Maker.

Answer 4

Kỹ thuật nổi tiếng nhất là suckerfish menus. Tìm kiếm điều đó sẽ dẫn đến rất nhiều menu thú vị. Nó chỉ cần javascript trong IE6 và thấp hơn.

Here's a list of the sons of the suckerfish menus.

Answer 5

Xem xét sử dụng phương thức CSS làm bản sao lưu khi JavaScript không khả dụng. JavaScript có thể * cung cấp trải nghiệm người dùng tốt hơn cho các trình đơn thả xuống vì bạn có thể thêm một số yếu tố trì hoãn để dừng các menu ngay lập tức biến mất nếu chuột rời khỏi vùng di chuột của chúng. Các menu Pure-CSS đôi khi có thể hơi khó sử dụng, đặc biệt nếu các mục tiêu di chuột nhỏ.

*: tất nhiên, không phải tất cả các kịch bản đơn thực sự bận tâm để làm điều này ...

Answer 6

Ngoài ra còn có Eric Meyer 's bài viết gốc trên pure CSS menus.

Có ràng buộc để được nhiều hơn nữa mạnh mẽ và hiện đại đưa ra có bây giờ được đề cập bởi những người khác, nhưng tôi nghĩ tôi muốn đề cập đến nó cho hậu thế. :)