منوها(اصلی)

نکته

لطفا توجه داشته باشید که منوهای اصلی از طریق جاوا اسکریپت بارگیری میشوند. این بدان معنی است که آنها برای مشاهده به صورت لوکال به یک محیط سرور، مانند AMPPS، XAMP یا WAMP نیاز دارند. اگر محیط سرور ندارید، لطفاً از code.visualstudio.com استفاده کنید. این یک ویرایشگر کد 100٪ رایگان است که دارای گزینه "پیش نمایش زنده" است که یک سرور لوکال را شبیه سازی میکند. اگر منو سفید نمایش داده میشود، دلیل این امر است. ک سرور لوکال آن را رفع میکند. این در سرور شما یا هنگام استفاده از صفحه به عنوان PWA اتفاق نمی افتد.

با توجه به اینکه محصول یک قالب HTML است، ویرایش کل منو به معنای ویرایش هر صفحه HTML جداگانه است که برای پروژه های بزرگ میتواند بسیار خسته کننده باشد. به همین دلیل، قالب از منوهای خارجی(external) استفاده میکند که ویرایش آن را بسیار ساده تر میکند. شما فقط باید یک فایل HTML را ویرایش کنید.
بیایید توضیح دهیم:

html

<div
  id="menu-main"
  class="menu menu-box-left"
  data-menu-width="280"
  data-menu-active="nav-welcome"
  data-menu-load="menu-main.html">
  <!-- (1) -->
</div>

خط 2 id منو است. این توسط دکمه data-menu="menu-main" هدف قرار خواهد گرفت.

خط 3 و 4: نوع منو و تنظیمات مربوط به آن است.

خط 5 کلاس active است که میخواهیم از آن استفاده کنیم. در فایل menu-main.html خواهید دید که هر لینک یک آی دی منحصر به فرد دارد. در مثال بالا، این کار id="nav-welcome" را روی active تنظیم میکند. میتوانید از این روش در صفحات خود برای "انتخاب" یا "فعال کردن" صفحه‌ای که مشاهده میکنید استفاده کنید. توجه داشته باشید که این فقط در menu-main.html اعمال میشود و فقط برای یک منو قابل استفاده است.

خط 6 منویی است که میخواهید بارگیری کنید. در این مورد ما میخواهیم منوی menu-main.html را بارگیری کنیم. این بدان معنی است که پس از بارگیری صفحه، محتوای menu-main.html در این div بارگیری میشود.

خط 8: نکته‌ی اضافی - اگر نمیخواهید از منوهای خارجی استفاده کنید، کافیست محتویات menu-main.html یا مورد نظر خود را در محل -- (1) -- کپی و پیست کنید و خط 6 را حذف کنید. به این ترتیب میتوانید از منو در همان صفحه HTML استفاده کنید و آن را از یک منبع خارجی بارگذاری نکنید.