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

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

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

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

});

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

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7726
کلمات کلیدی پست :
مطالب مرتبط
5,604DNS چیست و چگونه کار می‌کند؟ تاریخ : 2019/06/11
10,617چگونه فروشگاه اینترنتی راه اندازی کنیم تاریخ : 2016/10/27
6,799نمایش سایر مطالب نویسنده در هر پست وردپرس تاریخ : 2015/08/2
12,712آموزش قرار دادن تبلیغات بعد از پست اول در وردپرس تاریخ : 2013/10/20
10,298جلوگیری از ورود کاربران با دسترسی مشترک به داشبورد وردپرس تاریخ : 2015/08/3
6,589تغییر نحوه نمایش دیدگاه های مدیر در وردپرس تاریخ : 2016/04/5
22,529آموزش استفاده از Child Theme و کاربرد آن در وردپرس تاریخ : 2016/07/2
9,845آموزش کامل برنامه نویسی اندروید به زبان فارسی تاریخ : 2016/11/2
11,725آموزش قرار دادن ویدیو در پس زمینه سایت تاریخ : 2016/07/27
8,701آموزش ساخت ابزارک در وردپرس تاریخ : 2015/08/12
6,400ایجاد محدودیت در تعداد حروف دیدگاه های وردپرس تاریخ : 2016/07/10
13,475آموزش ساخت فهرست در وردپرس تاریخ : 2015/08/17
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
سئو سایت
تبلیغات