آموزش ساخت منو کشویی با المنتور [ساخت منوی Dropdown و موبایل]

منوی کشویی در المنتور چیست؟

منوی کشویی (Dropdown Menu) نوعی منوی ناوبری است که با قرار گرفتن نشانگر روی یک گزینه یا کلیک روی آن، گزینه های بیشتری را در قالب یک زیرمنو نمایش می دهد. برای مثال، فرض کنید در منوی اصلی سایت گزینه ای با عنوان «آموزش المنتور» دارید و زیر آن سه صفحه «نصب المنتور»، «آموزش کانتینر» و «آموزش فلکس باکس» قرار گرفته اند. در این حالت کاربر لازم نیست تمام این صفحات را در نوار اصلی مشاهده کند. کافی است روی «آموزش المنتور» قرار بگیرد یا آن را انتخاب کند تا زیرمنوی مربوط به آن باز شود.

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

آموزش ساخت منو کشویی المنتور

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

• ابتدا ساختار فهرست و زیرمنوها را در وردپرس ایجاد کنید.
• سپس منوی ایجادشده را در المنتور فراخوانی و ظاهر، چیدمان، رنگ، فاصله، انیمیشن و حالت واکنش گرا را تنظیم کنید.

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

مراحل ساخت منو با المنتور

مرحله اول: ورود به بخش فهرست های وردپرس

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

نمایش ← فهرست ها

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

مرحله دوم: ساخت یک فهرست جدید

اگر هنوز منوی اصلی سایت را ایجاد نکرده اید، گزینه ایجاد فهرست جدید را انتخاب کنید. برای فهرست یک نام مشخص انتخاب کنید؛ مثلاً:

منوی اصلی سایت

نامی که برای فهرست انتخاب می کنید معمولاً برای مدیریت داخلی سایت است و الزامی نیست همان متنی باشد که کاربران در سایت می بینند. پس از ایجاد فهرست، می توانید مشخص کنید که این منو در کدام موقعیت قالب نمایش داده شود. تعداد و نام موقعیت های منو به قالب وردپرس بستگی دارد. برای مثال ممکن است قالب شما موقعیت هایی مانند موارد زیر داشته باشد:

• منوی اصلی
• منوی هدر
• منوی فوتر
• منوی موبایل
• منوی ثانویه

اگر قالب شما چند موقعیت برای منو ارائه کند، باید موقعیتی را انتخاب کنید که با ساختار هدر سایت شما هماهنگ باشد.

مرحله سوم: اضافه کردن صفحات به منو

اکنون باید آیتم های منو را اضافه کنید. وردپرس امکان استفاده از انواع مختلف آیتم ها را در اختیار شما قرار می دهد؛ از جمله:

• برگه ها
• نوشته ها
• دسته بندی ها
• پیوندهای دلخواه

برای مثال، اگر سایت شما یک سایت آموزشی است، می توانید گزینه های زیر را به منوی اصلی اضافه کنید:

• صفحه اصلی
• آموزش المنتور
• آموزش وردپرس
• مقالات
• درباره ما
• تماس با ما

پس از انتخاب موارد موردنظر، روی گزینه افزودن به فهرست کلیک کنید و سپس ساختار منو را ذخیره کنید.

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

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

فرض کنید ساختار منوی شما این گونه است:

• خانه
• خدمات
• محصولات
• مقالات
• تماس با ما

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

ساختار نهایی باید چیزی شبیه این باشد:

• خانه
• خدمات
  • طراحی سایت
  • سئو
• محصولات
• مقالات
• تماس با ما

در وردپرس می توان با جابه جایی و کمی تورفتگی یک آیتم، آن را به زیرمنوی آیتم بالادستی تبدیل کرد. مستندات رسمی Elementor نیز ایجاد Submenu را با همین ساختار والد و فرزند توضیح می دهد.

مرحله پنجم: ذخیره منو

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

مرحله ششم: انتخاب منوی موردنظر

پس از قرار دادن ویجت منو در صفحه، در پنل تنظیمات به بخش انتخاب منو بروید. در این قسمت، فهرستی را که در مراحل قبلی ساخته اید انتخاب کنید؛ برای مثال:

منوی اصلی سایت

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

طراحی ظاهری منوی کشویی

بعد از ساخت ساختار منو، نوبت به طراحی آن می رسد. برای این کار به تب Style بروید.

تغییر تایپوگرافی منو

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

تغییر رنگ متن منو

رنگ متن باید با پس زمینه هدر کنتراست مناسبی داشته باشد. همچنین بهتر است حالت های مختلف را جداگانه بررسی کنید:

• حالت عادی
• حالت Hover
• حالت Active

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

تغییر فاصله بین آیتم های منو

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

افزودن Border و Shadow به زیرمنو

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

آموزش تصویری ساخت منو کشویی المنتور

ساخت منوی کشویی ریسپانسیو برای موبایل

یکی از مهم ترین بخش های آموزش ساخت منو با المنتور، تنظیم نمایش منو در موبایل است. منویی که در دسکتاپ به خوبی نمایش داده می شود، ممکن است در صفحه موبایل فضای کافی نداشته باشد. به همین دلیل Elementor امکاناتی برای تغییر رفتار منو در اندازه های مختلف صفحه ارائه می کند.

در تنظیمات WordPress Menu Widget می توان Breakpoint را مشخص کرد تا در عرض مشخصی از صفحه، منوی فشرده یا موبایلی فعال شود. همچنین گزینه هایی مانند Full Width، نحوه تراز متن و نمایش دکمه همبرگری در اختیار شما قرار می گیرند.

فعال کردن منوی همبرگری

در موبایل معمولاً به جای نمایش تمام گزینه های منو، یک آیکون سه خطی یا همان Hamburger Menu نمایش داده می شود. کاربر با لمس این آیکون، منوی کامل را مشاهده می کند. در Elementor می توانید تعیین کنید این حالت در موبایل یا تبلت فعال شود. همچنین امکان تغییر موقعیت دکمه همبرگری، آیکون و برخی تنظیمات ظاهری آن وجود دارد.

تنظیم Breakpoint

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

تنظیم Full Width

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

چگونه منوی کشویی را در هدر سایت قرار دهیم؟

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

• لوگوی سایت
• منوی اصلی
• دکمه ورود یا ثبت نام
• آیکون جستجو
• سبد خرید در سایت های فروشگاهی

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

آموزش تصویری ساخت منو کشویی با المنتور؛ مسیر کامل کار

تفاوت منوی کشویی معمولی و مگامنو در المنتور

منوی کشویی معمولی معمولاً برای نمایش یک مجموعه محدود از گزینه های مرتبط استفاده می شود. اما مگامنو (Mega Menu) ساختار گسترده تری دارد و می تواند چند ستون، تصاویر، آیکون ها و عناصر مختلف را در اختیار کاربر قرار دهد. برای مثال، اگر یک فروشگاه اینترنتی صدها محصول در دسته بندی های مختلف داشته باشد، قرار دادن تمام آن ها در یک Dropdown ساده می تواند ساختار نامناسبی ایجاد کند. در چنین شرایطی مگامنو می تواند دسته بندی ها را در چند ستون سازمان دهی کند.

Elementor در مستندات رسمی خود، Menu Widget را برای ساخت منوهای پیچیده و مگامنو معرفی کرده و برای آن امکاناتی مانند محتوای Dropdown و چیدمان گسترده تر ارائه می کند. اگر ساختار سایت شما ساده است، معمولاً همان منوی کشویی استاندارد کافی است و نیازی نیست بدون دلیل سراغ مگامنو بروید.

چطور ظاهر منوی کشویی را حرفه ای تر کنیم؟

چیزی که باید پس از خرید المنتور حرفه ای نصب آن باید بدانید این است که برای طراحی حرفه ای منو لازم نیست از تعداد زیادی افکت استفاده کنید. یک طراحی ساده با تایپوگرافی مناسب، فاصله استاندارد، رنگ بندی هماهنگ و Hover واضح معمولاً نتیجه بهتری دارد. برای مثال می توانید این الگوی طراحی را در نظر بگیرید:

جمع بندی

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

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

سؤالات متداول درباره ساخت منو کشویی با المنتور