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

هاست

آموزش ساخت منو ثابت با کمک جی کوئری

آموزش ها , مقالات,آموزش,ترفند

در پست آموزشی_اسکریپتی امروز، میخواهیم با کمک جی کوئری و سی اس اس یک منوی ثابت (fixed) ساده و کاربردی را بسازیم که با حرکت اسکرولر به سمت پایین، این منو نیزهمگام با آن حرکت کند.در ساخت این منو، 3 بخش اساسی CSS ، HTML و جی کوئری دخالت دارند.

آموزش ساخت منو ثابت با کمک جی کوئری

در بخش اول:

کدهای html زیر را در مکانی که میخواهید منو اصلی به نمایش در بیاید قرار دهید (مثلا در بخش header).

 

در بخش دوم:

نوبت به استایل دهی می رسد، بنابراین قطعه کد زیر را در شیوه نامه قالب خود قرار دهید (البته در این منو بر زیباسازی تأکید چندانی نشده و شما می توانید هر نوع استایلی را که خواستید به آن بدهید).

* سلکتور f-nav، نام کلاسی است که در بخش جی کوئری ساخته خواهد شد.

 

و در بخش آخر:

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

و کار تمام است.

فراموش نکنید، جهت استفاده از کدهای جاوا اسکریپت حتما باید کتابخانه جی کوئری فراخوانی شده باشد.


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

به صفحه اول گوگل بياييد - قوی ترين بک لينک در ايران
بک لينک در بيش از 20 هزار وبلاگ با دهها نمونه كار


هاست پرسرعت SSD ایران (ویژه افزایش رتبه سئو)
دیتاسنتر آسیاتک - مجهز به کلود لینوکس و لایت اسپید


مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/05/8 4 آموزش ها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7726

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,237اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 1396/08/8
2,766نکات قابل توجه برای راه اندازی سایت تاریخ : 1392/09/22
2,817نمایش مطالب مرتبط بدون افزونه در وردپرس تاریخ : 1394/05/11
2,220چندین ترفند کاربردی برای وردپرس تاریخ : 1392/10/21
2,96312 ابزار حرفه ای و رایگان برای تست سرعت وب سایت تاریخ : 1396/04/12
4,110لایک و دیسلایک برای Nuke 8.3 تاریخ : 1392/07/28
3,413ارور 404 در صفحه مطالب وردپرس تاریخ : 1394/05/16
1,868نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 1395/01/25
2,938آموزش ترفندهای جستجو در گوگل تاریخ : 1395/05/12
13,443اسکریپت رسم نمودار Highcharts تاریخ : 1393/04/29
5,013آموزش ساخت تب بوسیله جی کوئری تاریخ : 1392/09/6
6,984آموزش نصب آپلودسنتر میهالیسم فارسی تاریخ : 1393/03/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب