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

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

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

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

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

در بخش اول:

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

 

در بخش دوم:

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

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

 

و در بخش آخر:

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

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

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

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


دانلود


هاست مناسب برای وردپرس و سایر اسکریپت ها وطن هاست >

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
11,276آموزش نصب آپلودسنتر میهالیسم فارسی تاریخ : 2014/06/15
24,069کد php انتقال فایل به هاست تاریخ : 2016/12/8
4,913آموزش قرار دادن ویدیو در پس زمینه سایت تاریخ : 2016/07/27
5,625آموزش تغییر نویسنده مطالب در وردپرس تاریخ : 2016/10/19
4,105امکان انتخاب دسته بندی در فرم جستجو وردپرس تاریخ : 2015/08/6
3,851نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 2016/04/13
2,520Page Authority چیست؟ تاریخ : 2018/07/24
3,911نحوه تغییر رنگ نوار آدرس مرورگرهای موبایل برای هماهنگی با رنگ وردپرس تاریخ : 2016/03/30
4,019جلوگیری از اسپم ها در انجمن ویبولتین تاریخ : 2014/01/23
6,82012 ابزار حرفه ای و رایگان برای تست سرعت وب سایت تاریخ : 2017/07/3
1,064تغییر پورت SSH لینوکس برای امنیت بیشتر تاریخ : 2019/12/2
19,455آموزش ویدیویی تغییر نام کاربری وردپرس بدون افزونه تاریخ : 2016/03/16
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب