Làm thế nào để thực hiện một thả xuống menu CSS

hướng dẫn

Trước tiên, hãy hiểu một menu thả xuống là gì. Theo định nghĩa này nhận được rất nhiều phương pháp khác nhau xây dựng bố trí khác nhau. Trong trường hợp này, chúng tôi sẽ phân tích một cấu trúc bao gồm một số mặt hàng liên tục có thể nhìn thấy và một số bổ sung (ẩn). Chúng ta hãy kết thúc với lý thuyết và bắt đầu luyện tập.

• Chúng tôi tạo ra cách bố trí của trình đơn của chúng tôi. Để làm điều này, nhãn mã HTML. Tạo một danh sách lồng nhau:
  • • < / ul>. Một cái gì đó như thế này sẽ giống như menu thả xuống của bạn. CSS để can thiệp sau. Trong trường hợp này danh sách chính bao gồm ba lĩnh vực chính và hai kèm theo.
    • Ẩn sub-menu. Đối với điều này chúng tôi sử dụng một kiểu, xác định các thuộc tính sau: ul ul {display: none;} Điều này sẽ loại bỏ các yếu tố của danh sách thứ hai từ màn hình.
    • Tạo một CSS menu, thả xuống từ danh sách chính. Các cascading style sheets viết quy tắc sau: ul li: hover ul {display: block;}. Mục nhập này có nghĩa là khi chuột là so với li yếu tố, mà nằm trong danh sách ul xuất hiện trên màn hình ul (đính kèm). Ngay từ cái nhìn đầu tiên, một chương trình như vậy có vẻ phức tạp và khó hiểu. Nhưng trên thực tế, mọi thứ đều rất đơn giản.
    • Sử dụng cách bố trí này cho mình bằng cách chèn các thẻ
    • nội dung của bạn. Bạn có thể thay đổi số phần tử trong danh sách.

    thay đổi trang trí

    Ngay sau khi cách bố trí menu chính đã sẵn sàng, bạn có thể tiến hành đăng ký. Có lẽ, nhiều ở nơi đầu tiên sẵn sàng để thoát khỏi dấu chỉ mục danh sách. Này được thực hiện bằng cách sử dụng CSS tài sản duy nhất, cụ thể là list-style-type. Bạn cần phải thêm các mục sau đây: li {list-style-type: none;}. Sau đó, bạn có thể chèn khung và làm nền. Biên giới và nền giúp bạn với điều này. Có lẽ một số người sẽ không thích trình đơn thả xuống sẽ xuất hiện như là một danh sách bổ sung, đẩy vào các yếu tố cơ bản giống nhau. Để sửa lỗi này, bạn có thể vị trí của nó. Để làm điều này, cascading style sheets viết các mục sau đây: ul ul {position: absolute; trái: 15px; phải: 15px; top: 15px; bottom: 15px;}. Tất nhiên, các giá trị bạn sẽ sử dụng của riêng bạn. Tùy thuộc vào nơi bạn muốn thấy các trình đơn thả xuống, CSS sẽ cung cấp nhiều tính năng hơn, có thể thêm các hiệu ứng khác nhau và trang trí danh sách của chúng tôi.

    phần kết luận

    Một lần nữa nó là đáng chú ý việc xây dựng bố trí menu. Để gán các quy tắc CSS được sử dụng trong trường hợp nhúng giá trị này, ví dụ, ul ul. Nếu bạn đang ở trong tài liệu để đáp ứng cấu trúc tương tự khác, có thể có vấn đề lớn. Trong những tình huống này, bạn cần phải sử dụng một mục đích cụ thể, ví dụ, chọn lọc hoặc id-ID. Menu thả xuống bố trí bài viết ở trên được thiết kế để làm quen với thiết kế chung. Phần còn lại của công việc dựa trên vai của bạn.