آموزش تخصصی طراحی صفحات وب

ساخت گزینه های منو در EasyMenu

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

جهت این کار در همان قسمت تنظیمات EasyMenu بر روی علامت ... در مقابل Components کلیک کنید.

                                                                 مشاهده تصویر

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

مشاهده تصویر

با کلیک بر روی MenuItem شما یکی یکی اجزای منو را میسازید. بر روی MenuItem کلیک کنید.

مشاهده تصویر

با کلیک بر روی آن در قسمت Members به طور پیش فرض MenuItem1 ساخته می شود. شما این نام را در قسمت MenuItem1 Properties در گزینه InnerHtml به "صفحه اصلی" تغییر نام دهید.(در تصویر بالا مشخص کرده ام). همینطور مسیر دسترسی به آن (صفحه اصلی) را باید در قسمت URL صفحه Default.aspx بدهید.(این صفحه را در آینده میسازیم)

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

حال نوبت یک جدا کننده است. بر روی Add  کلیک کرده و سپس بر روی گزینه MenuSeprator کلیک کنید.

مشاهده تصویر

به صورت پیش فرض در قسمت مشخص شده در تصویر کد HTML یک خط افقی است. شما آن را پاک کنید و یک | (pipe) به جای آن بگذارید. معمولا پایپ با گرفتن Shif و ژ روی صفحه کلید می آِید. ممکن است صفحه کلید شما فرق داشته باشد.

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

1.Inner Html

2.URL

من کل گزینه های این منو که شما باید آن را بسازید را در جدولی در زیر می آورم.

URL

InnerHtml

Register.aspx

عضویت

Login.aspx

ورود

Search.aspx

بخش جستجو

Basket.aspx

سبد خرید

AboutUs.aspx

درباره ما

ContactUs.aspx

تماس با ما

AdminLogin.aspx

بخش مدیریت

Map.aspx

نقشه سایت

 

من ساختم . ببینید.

مشاهده تصویر

اگر مراحل را درست پیش رفته باشید. باید 16 تا شماره ، 9 تا منو آیتم و 8 تا Separator داشته باشید.

و درپنجره Design منوی زیر را مشاهده کنید.

مشاهده تصویر

امیدوارم گنگ توضیح نداده باشم. سعی کردم تا آنجایی که امکان دارد از نحوه کار عکس تهیه کنم.

خب یک گام ساده دیگر مانده تا کار ما تمام شود. یادتون هست که در جلسه پیش  گفتیم که در قسمت CSSMenu عبارت ParentMenu را قرار دهید؟ حال باید یک تغییراتی در قسمت Source برای EasyMenu انجام دهیم؟ چه تغییراتی؟ عرض می کنم خدمتتون.

به قسمت Source بروید و در قسمت CSSClasses عبارت جلوی Component یعنی EasyMenuItem را انتخاب کنید.

مشاهده تصویر

حال کلیدهای ترکیبی Ctrl + H را با هم بگیرید تا پنجره Find And Replace ظاهر شود. همانطور که در تصویر مشخص شده است در قسمت Replace With عبارت ParentItem  (به بزرگ بودن و کوچک بودن حروف دقت کنید ) را بنویسید و بر روی گزینه Replace All کلیک کنید. دقت کنید که قسمت Look in باید روی Current Document تنظیم شده باشد.

مشاهده تصویر

اگر درست رفته باشید باید مثل من 12 قسمت تغییر کند. اگر نکرد احتمالا قسمت look in بر روی Selection هست. اونجا را به Current Document تغییر دهید.

خب کار ساخت منو تمام شد. ادامه مباحث را در جلسه بعد پی می گیریم. با احترام علیرضا مهجور

 




+ نوشته شده در  سه شنبه ششم اسفند 1392ساعت 9:25  توسط علیرضا  |