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