تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات

تبلیغات
تبلیغات تبلیغات

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

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

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

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

در بخش اول:

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

 

در بخش دوم:

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

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

 

و در بخش آخر:

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

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

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


دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7726
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
7,920آموزش ویدیویی ساخت اکانت FTP تاریخ : 2014/02/1
4,565شمارش صفحات وردپرس بدون نیاز به نصب افزونه تاریخ : 2014/04/23
28,477کد php انتقال فایل به هاست تاریخ : 2016/12/8
11,937آموزش گرفتن درگاه پرداخت مستقیم بانک برای سایت تاریخ : 2016/09/19
4,679آموزش افزودن متن دلخواه آخر مطالب وردپرس تاریخ : 2016/03/13
5,227نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
4,612کلیدهای میانبر در وردپرس تاریخ : 2016/07/31
6,844حل مشکل آپلود swf در وردپرس تاریخ : 2014/01/2
6,442ارور 404 در صفحه مطالب وردپرس تاریخ : 2015/08/7
5,869ویرایش صفحه ی ورود و خروج در وردپرس تاریخ : 2014/07/31
3,000Page Authority چیست؟ تاریخ : 2018/07/24
4,917صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات