مدیریت منوها - Menus Management

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

Menu

• برای دسترسی به این بخش منوی زیر را انتخاب کنید:
Menu Menu

• با کلیک روی منوی بالا به صفحه مدیریت منوها هدایت می شوید:
 
Menu List

Icon Preview پیش نمایش منوی طراحی شده
Icon Items طراحی آیتم های منو
Icon Css ویرایش استایل منو
Icon Edit ویرایش اطلاعات منو
Icon Delete حذف منو
• برای ایجاد منوی جدید، روی آیکون Icon Add کلیک کنید:

Manu Insert

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

SlideDown: افکت باز شدن منو:
0 : بدون افکت.
1- : باز شدن منو با افکت فید (fade)
اعداد مثبت دیگر : باز شدن منو به صورت اسلاید بالا به پایین و هر عدد تعیین کننده سرعت اسلاید به میلی ثانیه می باشد. (2000 : 2 ثانیه)

SlideUp: افکت بسته شدن منو:
0 : بدون افکت.
1- : بسته شدن منو با افکت فید (fade)
اعداد مثبت دیگر : بسته شدن منو به صورت اسلاید پایین به بالا و هر عدد تعیین کننده سرعت اسلاید به میلی ثانیه می باشد. (1000 : 1 ثانیه)

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

• برای طراحی آیتم های منو روی آیکون Icon Items کلیک کنید تا به صفحه مدیریت آیتم های منو هدایت شوید.
• طراحی آیتم های منو در حالت استاندارد:
 
Menu Item Standard

• برای افزودن زیر منو به هر یک از آیتم های منو روی آیکون Icon Add همان آیتم کلیک کنید تا پنجره زیر باز شود:

Menu Item Insert
 
عنوان: عنوان آیتم.
آیکون: آیکون 16 * 16 که قبل از عنوان آیتم نمایش داده می شود. با کلیک روی دکمه Icon Open ابزار مدیریت فایل برای انتخاب آیکون، باز می شود.
لینک: انتخاب لینک آیتم که با کلیک روی آن به صفحه یا سایت مورد نظر هدایت می شوید. در باکس لینک می توانید به طور مستقیم آدرس دهی کنید (مانند http://google.com) و یا روی دکمه Icon Open کلیک کنید تا ابزار انتخابگر لینک باز شود و لینک مورد نظر را انتخاب کنید.
Icon Edit ویرایش آیتم منو
Icon Delete حذف آیتم منو (آیتم منو در صورتی حذف می شود که فرزند نداشته باشد، یعنی برای حذف هر آیتم ابتدا باید فرزندهای آن را حذف کرد)
• برای جا به جایی آیتم های منو (تغییر اولویت نمایش) کافیست با کلیک ماوس آیتم مورد نظر را در بین آیتم های دیگر حرکت داد.
 
Menu Item Move

• اگر آیتم منو دارای فرزند باشد، به همراه فرزندانش جا به جا می شود.
• در صورتی که آیتم منو از نوع محتوایی باشد، هنگام افزودن یا ویرایش آیتم، پنجره زیر باز می شود:
 
Menu Item Content
 
• در این حالت محتوا می تواند متن ساده باشد (مشابه نوع استاندارد) و یا ترکیبی از متن، رنگ، تصویر، لینک و ... باشد که به وسیله ابزار ویرایشگر متن ایجاد می شود.
• با کلیک روی آیکون Icon Css به صفحه طراحی استایل منو هدایت می شوید:

Menu Css

• سطح های منو:
Menu Style Level

• سطح اول شامل یک گروه استایل و سطح ها 2 تا N شامل یک گروه دیگر از استایل می باشند.
• در صورتی که برای گروه دوم استایل تعریف نشود، به صورت پیشفرض استایل ها را از سطح اول به ارث می برند.
• طراحی استایل هر بخش با اتصال به ابزار طراحی استایل انجام می شود و هر سطح شامل بخش های زیر می باشد:

Menu Css Item

• معرفی هر بخش به همراه کد استایل تصویر بالا ( کدها توسط ابزار طراحی استایل ایجاد شده اند و نیازی به یادگیری آن ها نیست )
1. منو آیتم
background-color: #EEEEEE;
border: 1px solid silver;
border-radius: 10px;
padding: 10px;
2. منو آیتم (زمانی که ماوس روی آن قرار می گیرد)
background-color: #CCCCCC;
border: 1px solid black;
3. لینک
background-color: #FF8370;
color: #2d2b2b;
display: block;
border: 1px solid red;
text-decoration: none;
padding: 10px;
border-radius: 10px;
4. لینک (زمانی که ماوس روی آن قرار می گیرد)
background-color: #FF5521;
color: white;
border: 1px solid blue;

Arrow  Icon Arrow Down Icon Arrow Left : آیکون هایی که نشان می دهد این آیتم از منو دارای فرزند است. می توان به کمک ابزار طراحی استایل آیکون، عرض، ارتفاع، محل قرارگیری و ... تغییر داد.

نمونه ای از منوهای طراحی شده
• زمانی که یک منو طراحی می کنید به صورت پیشفرض استایلی مشابه تصویر زیر دارد:

Menu Sample 1
 
• اما با تغییرات استایل می توانید منوهای متنوعی ایجاد کنید. در تصاویر زیر چند نمونه از منوهای ایجاد شده را مشاهده می کنید:
 
Menu Sample 2

Menu Sample 3

Menu Sample 4

Menu Sample 5

Menu Sample 6

Menu Sample 7

Menu Sample 8

Menu Sample 9