طراحی وب سایت آبادیس - مدیریت منوها

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

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

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

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

پیش نمایش منوی طراحی شده

طراحی آیتم های منو

ویرایش استایل منو

ویرایش اطلاعات منو

حذف منو
• برای ایجاد منوی جدید، روی آیکون

کلیک کنید:

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

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

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

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

• برای طراحی آیتم های منو روی آیکون

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

• برای افزودن زیر منو به هر یک از آیتم های منو روی آیکون

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

عنوان: عنوان آیتم.
آیکون: آیکون 16 * 16 که قبل از عنوان آیتم نمایش داده می شود. با کلیک روی دکمه

ابزار مدیریت فایل برای انتخاب آیکون، باز می شود.
لینک: انتخاب لینک آیتم که با کلیک روی آن به صفحه یا سایت مورد نظر هدایت می شوید. در باکس لینک می توانید به طور مستقیم آدرس دهی کنید (مانند http://google.com) و یا روی دکمه

کلیک کنید تا ابزار انتخابگر لینک باز شود و لینک مورد نظر را انتخاب کنید.

ویرایش آیتم منو

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

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

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

به صفحه طراحی استایل منو هدایت می شوید:

• سطح های منو:

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

• معرفی هر بخش به همراه کد استایل تصویر بالا ( کدها توسط ابزار طراحی استایل ایجاد شده اند و نیازی به یادگیری آن ها نیست )
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

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

نمونه ای از منوهای طراحی شده

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

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