دوره جامع سئو وردپرس

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

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

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

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

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

در بخش اول:

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

 

در بخش دوم:

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

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

 

و در بخش آخر:

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

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

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


دانلود


دوره حرفه ای آموزش سئو سایت مارکیو | رتبه اول گوگل یک رویا نیست!


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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,188آموزش تصویری تغییر دامنه سایت در گوگل وبمستر تاریخ : 1397/01/24
4,135نمایش سایر مطالب نویسنده در هر پست وردپرس تاریخ : 1394/05/11
2,804روش های افزایش سرعت ایندکس مطالب در گوگل تاریخ : 1397/04/21
432۸ نکته ساده برای تولید محتوا بهتر و فروش بیشتر تاریخ : 1398/08/5
3,861شمارش صفحات وردپرس بدون نیاز به نصب افزونه تاریخ : 1393/02/3
7,824افزونه وردپرس اسکرول سفارشی با Custom scrollbar نسخه 1.3 تاریخ : 1394/02/13
6,645UTM چیست؟ راهنمای کامل استفاده از UTM تاریخ : 1396/09/17
880چگونه کش DNS را در ویندوز، لینوکس و مک خالی کنیم؟ تاریخ : 1398/03/11
25,159آموزش رفع مشکل نصب افزونه و قالبهای وردپرس تاریخ : 1392/10/20
4,086ایجاد اشاره گرهای سفارشی در وردپرس تاریخ : 1393/07/12
3,036آموزش قرار دادن فرم ثبت نام وردپرس در قالب تاریخ : 1397/03/14
10,360کد نمایش چند تبلیغ بنری در یک مکان به صورت تصادفی تاریخ : 1394/06/28
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
Xبستن تبلیغات