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

هاست

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

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

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

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

در بخش اول:

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

 

در بخش دوم:

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

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

 

و در بخش آخر:

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

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

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

لطفا به این مطلب امتیاز بدید


دانلود


هاست مناسب برای تمامی اسکریپت های 20script MyHBD.net >

هاست
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , مقالات,آموزش,ترفند

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
4,018جلوگیری از انتشار مطالب بدون تصویر شاخص در وردپرس تاریخ : 2016/04/18
8,169آموزش ساخت تب بوسیله جی کوئری تاریخ : 2013/11/27
29,964آموزش اضافه کردن ابزارک به قالب وردپرس تاریخ : 2014/02/24
4,236حذف رشته های کوئری از سورس صفحات تاریخ : 2014/08/2
5,442اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 2017/10/30
4,063نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 2016/04/13
5,102آموزش برنامه نویسی PHP از سطح پایه تاریخ : 2016/11/1
4,779نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
2,632نمایش عنوان پست هایی که در آینده منتشر خواهند شد تاریخ : 2018/06/3
25,637کد php انتقال فایل به هاست تاریخ : 2016/12/8
7,845اسکریپت افکت قطرات باران در تصاویر تاریخ : 2014/07/24
4,581صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب