سلام
سایت نت نیک
چند وقت پیش توی سایت یکی از دوستانم یک منوی کشویی دیدم که خیلی نظرم رو جلب کرد

یک منوی افقی که بخش های منو روی هم قرار گرفته بودند و با کلیک روی هر بخش ، منوها کنار می رفتند و بخش مورد نظر نمایان میشد

خلاصه خیلی نظرم رو جلب کرد
همش توی ذهنم از خودم می پرسیدم که چجوری میشه همچین افکتی رو ساخت ؟!

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

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

کلی با توابع ور رفتم تا بالاخره تونستم این منوی فوق العاده زیبا رو خلق کنم


در ادامه خواهید آموخت که چگونه بوسیله  جی کوئری می تونیم این منو رو بسازیم

پیش نیاز : تسلط خوب بر HTML و CSS و آشنایی با جی کوئری

برای تسلط و یادگیری خوب CSS  بنده این مقاله رو پیشنهاد می کنم :

بهترین کتاب فارسی : آموزش CSS _(بسیار کامل-بسیار روان)

برای یادگیری html هم می تونید به اینجا مراجعه کنید.

دوستانی که با جی کوئری آشنایی ندارند ، می تونن فیلم آموزشی جی کوئری رو از آدرس زیر تهیه نمایند:

بنده تا جایی که بتونم خط به خط دستورات جی کوئری رو توضیح میدم ولی بهتره که شما تا حدودی با جی کوئری آشنا باشید

طرز کار :
ببینید ، طرز کار این منو بدین صورته که شما یک سری تگ دارید که بوسیله دستور سی اس اس  position  کاری می کنیم که اونها بصورت افقی روی هم قرار بگیرند

حال بوسیله جی کوئری تگ ها رو جابجا می کنیم (در جهت افقی) ، بدین صورت روی هر تگ که کلیک بشه ، تگ های رویی رو به سمت راست حرکت می دیم تا تگی که روش کلیک شده ، کاملا نمایان بشه



بنده عرض تگ ها رو 50 پیکسل و ارتفاع اونها رو 60 پیکسل در نظر گرفتم و از تگ li هم استفاده کردم (البته از div هم میشه استفاده کرد)

من طوری تگ ها رو موقعیت دهی کردم که نصفشون روی هم قرار بگیره ، شما می تونین طوری position ها رو تنظیم کنین که مثلا 90 درصد تگ ها روی هم قرار بگیره و 10 درصد از هر تگ معلوم باشه . (کاملا سلیقه ای است)
اگر دقت کنید ، بنده فاصله هر تگ از سمت چپ رو 50 تا بیشتر از تگ قبلی قرار داده ام
توجه : به دستور position:absolute دقت کنید

خوب تا اینجای کار که آسون بود .... میرسیم به قسمت های یکم قشنگ ترش


خوب اول از همه باید به سایت JQuery.Com برید و فایل کتابخونه جی کوئری رو دانلود کنید و اون رو به صفحه متصل کنین


بعد نوت پد رو باز کنیم و کد های جی کوئری مورد نیاز رو می نویسیم ، بعد فایل رو با پسوند js. ذخیره کنید و اون رو به صفحه متصل کنین


کد های جی کوئری بصورت زیر است :


همانطور که می بینید : ابتدا یک تابع $ نوشته ایم که با لود شدن صفحه لود می شود
سپس در رویداد کلیک تگ ها بوسیله تابع animate مقدار فاصله هر تگ تا سمت چپ صفه را تغییر می دهیم.
به همین سادگی ....

اینم عکس کارمون :
منوی کشویی با جی کوئری و جاوا اسکریپت

منوی کشویی با جی کوئری

منوی کشویی با جی کوئری
سوالات خود را از طریق بخش نظرات مطرح کنید .

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

سایت خودم رو از طریق همین افکت ساختم :  سریر وب


یا حق

نوشته شده در تاریخ شنبه 16 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery، پروژه ها و ساخته های خودم،     | نظرات()