Làm thế nào để tạo các danh sách động cho các chương trình HTML5 và CSS3 - núm vú

Một danh sách các nút đơn giản có thể trông đẹp hơn các liên kết HTML5 thông thường, nhưng đôi khi trang của bạn cần có một chương trình điều hướng phức tạp hơn. Ví dụ: bạn có thể muốn tạo một hệ thống menu để giúp người dùng xem cấu trúc trang của bạn.

Xây dựng một danh sách lồng nhau

Bắt đầu bằng cách tạo ra một hệ thống các danh sách lồng nhau mà không có bất kỳ CSS nào cả.

Chưa có kiểu dáng CSS nào được nêu ra, nhưng danh sách có sự phức tạp của nó:

• Danh sách chính có ba mục. Đây thực sự là một danh sách nhiều lớp. Cấp cao nhất cho biết danh mục, không nhất thiết phải liên kết.

• Mỗi phần tử trong danh sách trên cùng có danh sách phụ của chính nó. Một lớp thứ hai của liên kết có các liên kết khác nhau trong hầu hết các phần tử.

• Phần tử Phát triển web có một lớp phụ khác. Bố cục chung của mục nhập danh sách này tương ứng với một hệ thống thông tin phức tạp - như các trang web phức tạp nhất.

• Danh sách này hợp lệ với tiêu chuẩn HTML Strict. Điều đặc biệt quan trọng là xác thực mã của bạn trước khi thêm CSS khi nó liên quan đến mã HTML phức tạp, như danh sách nhiều cấp. Một vấn đề nhỏ trong cấu trúc HTML có thể không được chú ý trong một tài liệu HTML đơn giản có thể gây ra tất cả các loại sự cố lạ trong CSS của bạn.

Đây là mã cho danh sách lồng nhau trong HTML đơn giản:

nestedList. html

google

wikipedia

từ điển
phát triển web


Một số liên kết yêu thích của tôi

Mạng xã hội
digg
reddit


stumbleupon < XHTML / CSS

w3 schools

htmlHelp
CSS Zen Garden
Lập trình


javascript. com

php. net
mysql. com
Chú ý đặc biệt với phần thụt lề của bạn khi tạo một danh sách lồng nhau phức tạp như thế này. Nếu không có indentation đúng, nó sẽ trở nên rất khó khăn để thiết lập cấu trúc của trang. Ngoài ra, một mục trong danh sách có thể chứa văn bản và một danh sách khác. Bất kỳ sắp xếp khác sẽ gây ra một lỗi xác nhận.

Ẩn các danh sách bên trong

Bước đầu tiên của việc tạo một hệ thống trình đơn động là ẩn bất kỳ danh sách nào được nhúng trong một mục danh sách. Thêm kiểu CSS sau vào trang của bạn:

li ul {display: none;}

Trong thực tế, bạn thường áp dụng kỹ thuật này chỉ cho một div được đánh dấu đặc biệt, giống như một hệ thống menu.

Trang của bạn sẽ trải qua một sự chuyển đổi đáng kinh ngạc.

Đoạn mã nhỏ bé này của mã CSS là một nhà máy thực sự. Nó thực hiện một số điều thú vị, chẳng hạn như

Hoạt động trên các danh sách không có thứ tự xuất hiện bên trong các mục danh sách:

• Điều này thực sự có ý nghĩa là danh sách trên cùng sẽ không bị ảnh hưởng, nhưng bất kỳ danh sách không có thứ tự xuất hiện bên trong một mục danh sách sẽ có phong cách áp dụng. Sử dụng

• hiển thị: không có để làm cho văn bản biến mất: Thiết lập thuộc tính hiển thị để nói với trang HTML để ẩn các dữ liệu nhất định. Mã này hoạt động tốt trên hầu hết các trình duyệt.

Lấy danh sách bên trong để xuất hiện trên cue

Phần thú vị là nhận được danh sách bên trong để bật lên khi chuột nằm trên phần tử gốc. Một kiểu CSS thứ hai có thể làm cho điều này xảy ra:

li ul {display: none;}

Đoạn mã mới khá thú vị. Kiểm tra tác động của việc giữ con chuột qua phần tử mạng xã hội.

Mã này không hoạt động trên tất cả các trình duyệt! Internet Explorer 6 (IE6) và các phiên bản trước đó không hỗ trợ: hover pseudo-class trên bất kỳ phần tử nào trừ một. Cung cấp một bình luận có điều kiện với một phong cách thay thế cho các phiên bản đầu của IE. Tất cả các trình duyệt hiện đại (kể cả IE 7 trở lên) đều hoạt động tốt.

Đây là cách hoạt động của mã xuất hiện lại danh sách:

Tất cả danh sách bên trong các danh sách đều bị ẩn.

• Quy tắc kiểu đầu tiên sẽ giấu bất kỳ danh sách nào nằm trong phần tử danh sách. li: hover

• đề cập đến một mục trong danh sách đang được hovered. Nghĩa là, nếu con chuột nằm trên đầu mục danh sách, quy tắc này liên quan đến nó. li: hover ul

• đề cập đến một danh sách không có thứ tự bên trong một mục danh sách hoãn. Nói cách khác, nếu một số nội dung là một danh sách không có thứ tự nằm trong một danh sách hiện đang có con chuột lơ lửng trên nó, hãy áp dụng quy tắc này. Hiển thị danh sách dưới dạng khối.

• display: block ghi đè lên màn hình hiển thị trước: không có hướng dẫn và hiển thị các phần tử đặc biệt như là một khối. Văn bản lại xuất hiện lại kỳ diệu. Thủ thuật ẩn và tìm kiếm này không phải là tuyệt vời. Nó thực sự khá khó chịu khi có nội dung bật lên và biến mất như thế. Có một vấn đề khác khó chịu hơn.

Để xem lý do tại sao điều này xảy ra, hãy xem mã CSS gây ra đoạn xuất hiện lại:

li: hover ul {display: block;}

Đoạn mã này có nghĩa là thiết lập hiển thị để chặn cho bất kỳ ul nào một đứa trẻ của một lơ lửng. Vấn đề là li phát triển web chứa một ul có chứa

hai hơn uls. Tất cả các danh sách trong Phát triển web xuất hiện, không chỉ là đứa trẻ trước mắt. Một sửa đổi bổ sung của CSS khắc phục vấn đề này:

li ul> {display: block;}

Biểu tượng lớn hơn (>) là công cụ chọn lựa đặc biệt. Nó chỉ ra một mối quan hệ trực tiếp. Nói cách khác, Ul phải là một đứa trẻ trực tiếp của con lơ lửng, chứ không phải là một đứa cháu hay cháu nội. Với chỉ thị này tại chỗ, trang hoạt động chính xác.

Thủ thuật này cho phép bạn tạo các danh sách lồng nhau sâu sắc như bạn muốn và mở bất kỳ phân đoạn nào bằng cách di chuột lên tập lệnh của nó.

Mã hiện tại của tôi có một danh sách với ba mức độ làm tổ, nhưng bạn có thể thêm nhiều danh sách lồng nhau như bạn muốn và sử dụng mã này để làm cho nó hoạt động như một trình đơn động.

Loại thực đơn này không nhất thiết là một ý tưởng hay. Có nội dung pop xung quanh như thế này thực sự là khá phân tâm.