منوهایی برای طراحی واکنشگرا

در یک صفحه وب منوی اصلی یا همان Navigation یکی از مهمترین اجزا آن صفحه می باشد که باید به طراحی و پیاده سازی آن توجه قابل ملاحظه ای شود. از آنجایی تقریبا نیمی از کاربران وب از گوشی های همراه خود برای مرور صفحات وب استفاده می کنند باید به نحوه نمایش و عملکرد این منو در دستگاه هایی با عرض صفحه نمایش کمتر نیز اهمیت بدهیم.

در این مطلب تعدادی از ایده های خلاقانه و زیبا را جهت پیاده سازی منوی اصلی صفحه برای دستگاه هایی با عرض نمایش کوچک را بررسی میکنیم.

1: Morphing Hamburger Menu

طراح: iamvdo

2:

طراح: Virgil Pana

See the Pen dPKavr by Virgil Pana (@virgilpana) on CodePen.

3:

طراح: Virgil Pana

See the Pen Menu 1 by Virgil Pana (@virgilpana) on CodePen.

4:

طراح: Virgil Pana

See the Pen Menu 2 by Virgil Pana (@virgilpana) on CodePen.

5: Page Tilt Effect

طراح: Marco Fugaro

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

6: Burger menu transformation

طراح: Victor Belozyorov

See the Pen Burger menu transformation by Victor Belozyorov (@WispProxy) on CodePen.

7: UI with UX improvements with only CSS

طراح: Twikito

See the Pen UI with UX improvements with only CSS by Twikito (@Twikito) on CodePen.

8: Open/Close SVG Drawer

طراح: John Choura Jr.

See the Pen Open/Close SVG Drawer by John Choura Jr. (@jchoura) on CodePen.

9: Unnamed Menu

طراح: Zoë

See the Pen Unnamed Menu – CSS by Zoë (@z-) on CodePen.

10: Offcanvas sidebar menu with a twist

طراح: Devilish Alchemist

See the Pen Offcanvas sidebar menu with a twist by Devilish Alchemist (@devilishalchemist) on CodePen.

11: Full width navigation

طراح: codyhouse.co

12: Smart Fixed Navigation

طراح: codyhouse.co

13: Rounded Animated Navigation

طراح: codyhouse.co

14: 3D Bold Navigation

طراح: codyhouse.co

15: Stretchy Navigation

طراح: codyhouse.co

مثال‌هایی از دنیای واقعی

در ادامه لیستی از سایت هایی را مشاهده میکنید که این ایده ها و شبیه به آنها را در خود جای داده اند:

• Gus-trans.com
• Artistsweb.com
• Goldinteractive.ch
• Handbook.zaarly.com
• Ruya.ae
• Bigspaceship.com