Menu điều hướng đáp ứng, các mục "tuck under" eachother

Question

Tôi hy vọng ai đó có thể chỉ cho tôi đúng hướng với những gì tôi hy vọng đạt được. Tôi đang xây dựng một trang web đáp ứng và có một menu điều hướng truyền thống mở rộng trên cùng, với một số mục bên trong.

Tôi cần cho trình đơn này co lại khi trang thu hẹp hơn, nhưng thay vì menu điều hướng, tôi muốn các mục không phù hợp để đi bên dưới tab thả xuống "Khác ...". Điều này có nghĩa không? Dưới đây là một đại diện đồ họa ...

Vì vậy, hình ảnh hàng đầu sẽ là những gì nó có thể trông giống như với 1024 chiều rộng, và dưới đây là chiều rộng 768.

Nội dung trong menu không xác định nên độ rộng sẽ thay đổi, vì vậy tôi cần tính chiều rộng của các liên kết được kết hợp và sau đó bất kỳ thứ gì nhiều hơn sẽ được đặt bên dưới menu thả xuống Khác ...

Bất kỳ mẹo nào sẽ được đánh giá rất nhiều, chỉ cần không chắc chắn bắt đầu từ đâu vào lúc này.

Cảm ơn

Answer 1

Dưới đây là một jQuery plugin tốt đẹp mà có thể giải quyết vấn đề: https://github.com/352Media/flexMenu

Ngoài ra hãy chắc chắn để kiểm tra một bài viết tuyệt vời cung cấp một bước theo các bước hướng dẫn về cách tổ chức như thế này hàng hải linh hoạt bằng cách sử dụng flexMenu nói trên plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/

Answer 2

Tôi nghĩ biến thể của tôi có thể là điểm khởi đầu cho bạn. Tôi là một người mới trong jQuery và đang học rất nhiều bản thân mình - vì vậy bất cứ ai, cảm thấy tự do để sửa (và nâng cao) phương pháp của tôi hay logic của tôi :)

điểm khởi đầu của tôi là ở đây: http://jsfiddle.net/skip405/yN595/1/

Để xem nó trong hành động, bạn cần phải thay đổi kích thước cửa sổ Kết quả để có 3 hoặc 4 mục liên tiếp (không phải 7) và nhấn Chạy lại. Di chuột qua Khác để xem phần còn lại của chúng.

Trong fiddle này tôi tính chiều rộng của các mục danh sách trong một vòng lặp và so sánh nó với chiều rộng của toàn bộ menu. Khi chiều rộng được tính toán của các mục sẽ cao hơn chiều rộng của menu - chúng tôi có thể nhận được số lượng hiển thị li giây tại thời điểm này.

NB: Mã này hoạt động trên document.ready và sẽ không hoạt động khi thay đổi kích thước cửa sổ. Vì vậy, nhấn Chạy khi bạn thay đổi kích thước cửa sổ ngay bây giờ.

Answer 3

Thực hiện điều này khá đơn giản, nếu trình đơn có thể tĩnh và không phải điều chỉnh khi cửa sổ được thay đổi kích thước; Ví dụ của @ skip405 là một giải pháp thực sự tốt trong trường hợp này (+1).

Nếu việc triển khai phải điều chỉnh menu động khi thay đổi kích thước cửa sổ, điều đó sẽ khó khăn ... Sự kiện window.onresize được kích hoạt khá thường xuyên trong khi người dùng mở cửa sổ trình duyệt, do đó thực hiện ngây thơ (ví dụ: cách tiếp cận @ skip405 được thực hiện mọi sự kiện) sẽ quá chậm/tốn kém.

tôi muốn giải quyết vấn đề như sau:

1. Tính và thêm lên chiều rộng bên ngoài của tất cả các liên kết ngay từ đầu.
2. Nối tất cả các liên kết có sẵn vào tab "thêm" (nhân bản) để chúng có thể được hiển thị/ẩn động. Điều này nhanh hơn nhiều so với việc tạo các phần tử DOM mới (resp. Destroying) mọi lúc.
3. Liên kết người xử lý với sự kiện onresize. Trong trình xử lý, hãy lấy chiều rộng trình đơn hiện tại và so sánh nó với chiều rộng của các liên kết.Ẩn tất cả các liên kết không vừa trong menu và hiển thị các liên kết của chúng trong tab "thêm". Điều tương tự cũng diễn ra theo cách khác để hiển thị các liên kết nếu menu đủ rộng.

Dưới đây là thực hiện của tôi: http://jsfiddle.net/vNqTF/

Chỉ cần thay đổi kích thước cửa sổ và xem những gì sẽ xảy ra. ;) Lưu ý rằng giải pháp vẫn có thể được tối ưu hóa tất nhiên - đó chỉ là một ví dụ.