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

در پست آموزشی_اسکریپتی امروز، میخواهیم با کمک جی کوئری و سی اس اس یک منوی ثابت (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");
		}
	});

});

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

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