Chia sẻ mẫu menu tự động responsive chỉ với CSS

Ý tưởng của menu tự động responsive bắt đầu từ việc: hiển thị hết những menu items cho đến khi nó hết cỡ, với một nút toggle để hiển thị phần còn lại.Tôi rất thích ý tưởng này. Bởi nó khá đẹp mắt, ít code và thực sự hữu ích. Cách hiển thị cũng như cách thực thực hiện của menu tự động responsive này có thể đa dạng, khác nhau. Chúng ta hãy cùng xem một số ví dụ!

Menu tự động responsive

Dưới dây chính là mẫu menu mà tôi mới sử dụng. Không một chút JS nào. Bạn chỉ việc ném nó vào dự án, mọi thứ đều sẵn sàng. Mẫu menu này sẽ đẩy những phần không vừa xuống phần nút menu.

Khi ấn nút, phần menu này sẽ được hiển thị dạng stack, block, từng khối từng khối một cho tất cả menu item.

See the Pen CSS only priority navigation by Ola Christensson (@olach) on CodePen.light

 

Một ví dụ đơn giản khác

See the Pen Drop Away Nav by Chris Coyier (@chriscoyier) on CodePen.light

Với mẫu này, bạn chỉ cần thêm một chút JS dùng khi tick vào nút “more” hoặc gì đó. Thực sự đơn giản.

Được áp dụng với thực tế

Đây là phần Menu tự động responsive tại NCSBN.org:

Và Wonderful Machine:

Oke? Bạn đã thích nó rồi chứ?

Ngoài ra, một mẫu code tương tự từ Luke Jacksonn mà bạn có thể áp dụng:

See the Pen Greedy Navigation by lukejacksonn (@lukejacksonn) on CodePen.light

Mẫu này có kha khá JavaScript hơn, tuy nhiên nhìn nó cũng hiện đại hơn đáng kể nhỉ?

See the Pen Container-Adapting Tabs With “More” Button by Osvaldas (@osvaldas) on CodePen.light

 

Vậy bạn sẽ

Sử dụng nó? Thích nó? Ghét nó? Hãy cho tôi biết ý kiến của bạn nhé.

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: