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

دسته‌ها : آموزش, سی اس اس علی میرزائی 10 دیدگاه‌ها

منو ثابت در اسکرولر

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

});

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

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

دیدگاه کاربران در مورد این نوشته

  1. خدا به شدت خیرت بده

    توسط سام پاسخ

  2. خیلی عالی بود ممنون.

    توسط مجتبی پاسخ

  3. مطالب با کیفیت و عالی ست with ==> آموزش عالی

    توسط سهیل پاسخ

    1. مرسی سهیل عزیز {گل}

      توسط علی میرزائی پاسخ

  4. خیلی ممنون
    واقعا اموزش های سایت عالیه دستت درد نکنه ♥
    برای اینکه منو در فوتر قرار بگیره کدوم قسمت کد رو باید تغییر داد ممنون میشم راهنمایی کنید ♥

    توسط ارسلان پاسخ

  5. سلام. خسته نباشید!
    خیلی ممنون بابت آموزش کاربردیتون
    من این قابلیت رو به منوی سایتم اضافه کردم . اما توی صفحه ی اول سایت با پایین اومدن صفحه، منو زیر چنتا از عکسا میره و یخرده ناجوره میشه. میخواستم بدونم دلیلش چیه؟ چطور میتونم بدون دست زدن به قسمت های دیگه سایت این مشکل رو برطرف کنم؟
    آدرس : http://applazem.ir

    توسط امیرحسین پاسخ

  6. با تشکر از مطالب سایتتون . خوب و کاربردی بود

    توسط سعید پاسخ

    1. زنده باشید… :)

      توسط علی میرزائی پاسخ

  7. درود خیلی عالیه چطور میشه این رو به فهرست مجهز کرد؟

    توسط djmostafa پاسخ

    1. سلام،
      لینک زیر رو دنبال کنید:
      http://tiny.alimir.ir/z

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید