Làm thế nào để Xác định một Menu CSS3 chuyên biệt - núm vú

Các nút trình đơn tách biệt cung cấp một cách để cung cấp cho trang web CSS3 của bạn một cái nhìn đặc biệt. Nút chia sẻ cho người xem biết rằng lựa chọn trình đơn mặc định là những gì họ nhìn thấy vào lúc này, nhưng các lựa chọn khác có sẵn. Đơn giản chỉ cần nhấp vào nút chia sẽ đưa người xem vào trang web mặc định.

Tuy nhiên, nhấp vào mũi tên xuống bên cạnh nút hiển thị các tùy chọn khác và người xem có thể dễ dàng chọn bất kỳ nút nào trong số đó làm thay thế cho mặc định.

Loại thực đơn này không giới hạn chỉ để hướng người đến các địa điểm khác. Nó cũng có thể hoạt động như một loại trường đầu vào cho một biểu mẫu. Nút hiển thị lựa chọn mặc định cho trường đó. Tuy nhiên, bạn cũng có thể chọn một trong những lựa chọn thay thế nếu họ làm việc tốt hơn. Vấn đề là các nút menu chia tách cung cấp cách tiếp cận chuyên biệt để phát triển trình đơn.

Ví dụ trong bài viết này dựa vào các nút Menu chia nhỏ v1. 2 ví dụ được hiển thị tại Dynamic Drive. Các bước sau giúp bạn bắt đầu sử dụng trình đơn chuyên biệt này và cung cấp các đề xuất về sửa đổi mà bạn có thể muốn thực hiện.

Tải về các tập tin chia nhỏ. js được tìm thấy trong phần Bước 1 của trang Drive động và sau đó đặt nó vào thư mục bạn muốn sử dụng cho trang thử nghiệm của mình.
Tải xuống các nút chia nhỏ. css được tìm thấy trong phần Bước 1 của trang Drive động, và sau đó đặt nó vào thư mục bạn muốn sử dụng cho trang thử nghiệm của bạn.
Tạo trang HTML 5 mới sử dụng trình chỉnh sửa văn bản ưa thích hoặc IDE của bạn, sau đó lưu nó dưới dạng SplitButton. HTML.
Thay đổi thẻ như được hiển thị ở đây:
```
Ví dụ về Sử dụng Menu Nút Chia
```
Nhấp vào Chọn Tất cả trong phần Bước 2 của trang Drive động.

Bạn thấy mã tiêu đề cho ví dụ được đánh dấu.
Sao chép văn bản được đánh dấu vào khay nhớ tạm thời và sau đó dán nó vào trong phần của trang ví dụ.

Trình soạn thảo thêm mã vào phần này. Nếu bạn xem xét cẩn thận mã này, bạn sẽ tìm thấy một liên kết đến các đoạn mã. css và một tham chiếu kịch bản để splitmenubuttons. js. Ví dụ này cũng dựa trên jQuery, vì vậy bạn tìm thấy một tài liệu tham khảo kịch bản để jquery. phút js.

Mã này cũng bao gồm một kịch bản để tạo các nút chia sử dụng cú pháp jQuery. Bạn sẽ không cần phải sửa đổi kịch bản này miễn là bạn làm theo một vài quy tắc đơn giản trong việc tạo trình đơn của bạn. Các bước sau đây thảo luận về các quy tắc này.
Tạo liên kết cho mỗi mục trên cùng của trình đơn trong phần của trang như sau:
```
Trang chủ Sản phẩm Giới thiệu
```
Mỗi mục trong số này là nút trình đơn cấp cao nhất của trang. Khi người dùng hiển thị trang, nó sẽ hiển thị Trang chủ, Sản phẩm và Giới thiệu dưới dạng ba nút.Mỗi nút sẽ đi tới một vị trí cụ thể khi được nhấp. Tuy nhiên, bạn có thể thay thế # cho thuộc tính href nếu bạn không muốn một nút để làm bất cứ điều gì khi nhấp chuột.

Lớp học phải xuất hiện dưới dạng splitmenubutton trong mọi trường hợp. Bạn có thể tìm thấy CSS cho lớp này trong các nút tách. tập tin css.

Thuộc tính trình diễn dữ liệu xác định trình đơn con nào sẽ sử dụng. Bạn phải xác định tên, ngay cả khi bạn không có ý định sử dụng một menu con với một nút cụ thể. Trong ví dụ này, nút Trang chủ sẽ không bao gồm bất kỳ menu phụ nào.

Thuộc tính chia nhỏ dữ liệu xác định xem một nút sẽ hiển thị mũi tên xuống dưới như một phần của nút hay như một nút riêng biệt. Ví dụ này cho thấy cả hai trường hợp. Cài đặt mặc định là đúng, có nghĩa là mũi tên xuất hiện dưới dạng một nút riêng biệt.

Bạn sử dụng thuộc tính data-menucolors để xác định màu sắc được sử dụng cho màu nền mặc định và màu đã chọn. Màu mặc định là DarkRed, nhưng hầu hết các nhà phát triển sẽ muốn ghi đè các giá trị mặc định để có được một cái nhìn cụ thể.
Tạo menu con cho menu Sản phẩm, sử dụng mã sau:
```
Sản phẩm 1
Sản phẩm 2
Sản phẩm 3
Sản phẩm 4
Sản phẩm 5
```
Một menu phụ chỉ đơn giản là không có thứ tự danh sách. Mỗi mục trong danh sách có chứa một điểm neo trỏ đến vị trí bạn muốn người xem đi. Danh sách không có thứ tự phải có một giá trị thuộc tính id phù hợp với giá trị thuộc tính data-showmenu. Ngoài ra, cấp bậc đầu tiên của danh sách không có thứ bậc trong một menu phụ phải sử dụng lớp splitdropdown.

Gửi tin qua e-mail


qua thư điện tử
Gửi thư qua đường bưu điện
Gửi E-mail

Tạo một menu phụ cho menu Giới thiệu, sử dụng mã sau:
Lịch sử của chúng tôi
> webmaster

Hỗ trợ
Menu này phức tạp hơn một chút. Nếu bạn muốn tạo menu phụ của menu phụ của mình, chỉ cần đặt danh sách không có thứ tự tương ứng bên trong danh sách như được hiển thị. Menu phụ Liên hệ thực sự chứa ba cấp độ của các tùy chọn trình đơn.

Thêm thuộc tính class = "separator" khi bạn muốn thêm một khoảng trống nhỏ giữa các mục trình đơn. Sử dụng thuộc tính này làm cho người dùng có thể xem được mối quan hệ giữa các mục trình đơn dễ dàng hơn.

Lưu SplitButton đã sửa đổi. HTML và tải nó trong trình duyệt của bạn.

Bạn thấy sản lượng đơn giản.

Lưu ý rằng nút Trang chủ xuất hiện giống như bất kỳ nút nào khác, nhưng nó thiếu mũi tên xuống vì nó không có menu liên quan. Nhấp vào nút này sẽ đưa bạn đến trang chủ.

Cũng như bất kỳ trình đơn dựa trên CSS nào, bạn có thể thực hiện một số thay đổi đối với sự xuất hiện của các menu này. Ví dụ: bạn có thể thay đổi các mũi tên thành một cái gì đó khác với hình tam giác đơn giản được hiển thị.