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

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

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

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

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

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

در بخش اول:

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

<div class="nav-container">
<div class="nav">
	<ul>
		<li><a href="">خانه</a></li>
		<li><a href="">وردپرس</a></li>
		<li><a href="">برنامه نویسی</a></li>
		<li><a href="">دانلود</a></li>
		<li><a href="">تماس با ما</a></li>
		<li><a href="">درباره ما</a></li>
		<li><a href="">ورود به سایت</a></li>
	</ul>
	<div class="clear"></div>
</div>
</div>

 

در بخش دوم:

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

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

body {
	height: 2000px;
	direction:rtl;
	font-family:Tahoma;
	background: #F3F3F3;
}
.nav-container {
	background-color: #3c404b;
	background: -webkit-linear-gradient(#56585D, #2F3034);
	background: -moz-linear-gradient(#56585D, #2F3034);
	background: linear-gradient(#56585D, #2F3034);
}
.f-nav {
	z-index: 9999;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	background: #efefef;
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
	background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
} /* this make our menu fixed top */
.nav {
	height: 42px;
}
.nav ul {
	list-style: none;
}
.nav ul li {
	float: right;
	margin-top: 6px;
	padding:6px;
	border-left: 1px solid #ACACAC;
}
.nav ul li:first-child {
	padding-left: 0;
}
.nav ul li a {
	text-decoration:none;
	padding:10px;
	color:#fff;
}
.nav ul li a:hover {
	text-decoration: underline;
}

 

و در بخش آخر:

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

jQuery("document").ready(function($){

	var nav = $('.nav-container');

	$(window).scroll(function () {
		if ($(this).scrollTop() > 186) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});

});

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7726
کلمات کلیدی پست :
مطالب مرتبط
9,794آموزش ایجاد افکت shake + جی کوئری تاریخ : 2014/07/21
7,299محدود کردن تعداد برچسب ها در ابزارک ابر برچسب وردپرس تاریخ : 2014/04/17
4,544آموزش ساخت صفحه ابر برچسب ها در وردپرس تاریخ : 2018/06/2
15,248آموزش نصب آپلودسنتر میهالیسم فارسی تاریخ : 2014/06/15
7,011نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
52,750آموزش ارسال اطلاعات یک فرم به ایمیل تاریخ : 2013/10/26
7,695نمایش مطالب مرتبط بدون افزونه در وردپرس تاریخ : 2015/08/2
5,812کلیدهای میانبر در وردپرس تاریخ : 2016/07/31
10,453آموزش اجرای متد ها در jquery تاریخ : 2013/11/21
5,985هشتمین شماره ماهنامه طراحی وب منتشر شد تاریخ : 2015/01/22
11,256آموزش درج تاریخ بروزرسانی مطالب در وردپرس تاریخ : 2016/09/16
5,119نمایش مطالب نویسنده در مدیریت تاریخ : 2014/01/10
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات