ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

در پست آموزشی_اسکریپتی امروز، میخواهیم با کمک جی کوئری و سی اس اس یک منوی ثابت (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
کلمات کلیدی پست :
مطالب مرتبط
9,968آموزش تغییر عنوان ایمیل های ارسالی در وردپرس تاریخ : 2014/06/6
9,376انتشار پنجمین شماره ماهنامه طراحی وب تاریخ : 2014/08/28
8,739نمایش سایر مطالب نویسنده در هر پست وردپرس تاریخ : 2015/08/2
11,640نمایش تاریخ آخرین آپدیت پست های وردپرس تاریخ : 2015/07/29
15,116آموزش قرار دادن تبلیغات بعد از پست اول در وردپرس تاریخ : 2013/10/20
10,257آموزش ترفندهای جستجو در گوگل تاریخ : 2016/08/2
8,737امکان انتخاب دسته بندی در فرم جستجو وردپرس تاریخ : 2015/08/6
7,344DNS چیست و چگونه کار می‌کند؟ تاریخ : 2019/06/11
4,700جلوگیری از حملات sql injection با کد htaccess تاریخ : 2021/12/20
9,294جستجو در فیلدهای سفارشی وردپرس بدون افزونه تاریخ : 2016/09/15
10,927نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
108,015آموزش حرفه ای ریپ کردن قالب های وردپرس تاریخ : 2014/04/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file