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

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

طراح: iamvdo

۲:

طراح: Virgil Pana

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

۳:

طراح: Virgil Pana

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

۴:

طراح: Virgil Pana

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

۵: Page Tilt Effect

طراح: Marco Fugaro

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

طراح: Victor Belozyorov

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

۷: UI with UX improvements with only CSS

طراح: Twikito

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

۸: Open/Close SVG Drawer

طراح: John Choura Jr.

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

۹: Unnamed Menu

طراح: Zoë

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

۱۰: Offcanvas sidebar menu with a twist

طراح: Devilish Alchemist

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

۱۱: Full width navigation

طراح: codyhouse.co

۱۲: Smart Fixed Navigation

طراح: codyhouse.co

۱۳: Rounded Animated Navigation

طراح: codyhouse.co

۱۴: ۳D Bold Navigation

طراح: codyhouse.co

۱۵: Stretchy Navigation

طراح: codyhouse.co

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

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