نحوه ویرایش منوی موبایل در جریان وب

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

خوشبختانه، Webflow اضافه کردن یک نوار منوی همبرگر تاشو را آسان کرده است که سایت تلفن همراه شما را ساده می کند. برای یادگیری نحوه ویرایش این منوی موبایل در Webflow به خواندن ادامه دهید.

نحوه اضافه کردن نوار ناوبری

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

در Webflow، این منو و عملکردهای آن در داخل عنصر NavBar ساخته شده است. افزودن این عنصر به طراحی شما به چهار مرحله ساده نیاز دارد:

1. روی نماد «+» در بالای پانل سمت چپ ضربه بزنید تا پانل «افزودن» باز شود.
   
2. به بخش "کامپوننت ها" به پایین بروید.
   
3. عنصر "NavBar" را کلیک کرده و نگه دارید.
   
4. عنصر را به هدر صفحه بکشید.
   

نحوه ویرایش منوی موبایل

هنگامی که یک نوار ناوبری به وب سایت خود اضافه کردید، چندین روش مختلف وجود دارد که می توانید سبک و شخصیت را به این منو اضافه کنید.

نحوه افزودن لینک های بیشتر به منو

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

برای افزودن پیوندهای ناوبری بیشتر این مراحل را دنبال کنید:

1. روی هر عنصری در داخل نوار نوار کلیک کنید.
   
2. به پانل "Elements Settings" در سمت راست بروید.
   
3. نماد چرخ دنده را فشار دهید تا "تنظیمات" باز شود.
   
4. به بخش «تنظیمات نوار نوار» بروید.
   
5. روی دکمه «افزودن پیوند» ضربه بزنید.
   

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

1. پیوند ناوبری را انتخاب کنید.
2. به پانل "Elements Settings" بروید.
   
3. بخش "تنظیمات پیوند" را پیدا کنید.
   
4. URL صفحه وب تعیین شده را در قسمت "URL" وارد کنید.
   

نحوه تغییر انیمیشن منو

در Webflow، همچنین می‌توانید نحوه نمایش منوی تلفن همراه را با کلیک کردن بازدیدکنندگان روی دکمه منو تغییر دهید. شما می توانید از بین سه نوع از این انیمیشن های آشکار یکی را انتخاب کنید:

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

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

1. هر عنصری را در داخل نوار نوار انتخاب کنید.
   
2. به پانل "Elements Settings" در سمت راست صفحه خود بروید.
   
3. روی نماد چرخ دنده ضربه بزنید تا «تنظیمات» اجرا شود.
   
4. به بخش «تنظیمات نوار نوار» بروید.
   
5. بر روی گزینه "نوع" کلیک کنید.
   
6. سبک مورد نظر را از منوی کشویی انتخاب کنید.
   

در بخش «تنظیمات نوار نوار»، می‌توانید موارد زیر را نیز کنترل کنید:

• Easing open: نوع منحنی مورد استفاده برای متحرک سازی انتقال باز.
• Easing close: نوع منحنی مورد استفاده برای متحرک سازی انتقال بسته.
• مدت زمان: چه مدت طول می کشد تا منو ظاهر شود.

توجه داشته باشید که مدت زمان انتقال بر حسب میلی ثانیه اندازه گیری می شود.

نحوه تغییر استایل منو

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

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

1. دکمه منو را انتخاب کنید.
   
2. به پانل "Style" در سمت راست (نماد قلم مو) بروید.
   

پانل Style به شما امکان می دهد هر جنبه ای از دکمه منو را تغییر دهید. معمولاً طراحان رنگ پس‌زمینه و اندازه دکمه را تغییر می‌دهند.

برای تغییر رنگ پس زمینه مراحل زیر را انجام دهید:

1. به بخش "پس زمینه" بروید.
   
2. روی نماد رها کردن رنگ ضربه بزنید تا "Color Picker" باز شود.
   
3. رنگ مورد نظر را انتخاب کنید.
   

اگر می‌خواهید اندازه نماد همبرگر را تغییر دهید، این مراحل را دنبال کنید:

1. به بخش "تایپوگرافی" بروید.
   
2. اندازه نماد را در قسمت "Aa" افزایش یا کاهش دهید.
   

همچنین می توانید رنگ آیکون را در قسمت بالا که با حرف A و یک قطره رنگ مشخص شده است تغییر دهید.

در حالی که راه های زیادی برای سفارشی کردن دکمه منو وجود دارد، نمی توانید آن را با یک عنصر متنی یا یک تصویر سفارشی جایگزین کنید.

ناوبری موبایل آسان شد

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

پس از آن، می توانید با استایل منو و انیمیشن بازی کنید تا بازدیدکنندگان خود را در هر مرحله از راه علاقه مند کنید.

آیا سعی کرده اید منوی موبایل را به وب سایت خود اضافه کنید؟ چند گزینه را وارد کردید؟ در بخش نظرات زیر به ما اطلاع دهید.