آموزش ساخت navbar – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Tue, 28 Apr 2015 11:52:40 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%86%d9%88%db%8c-%da%86%d8%b3%d8%a8%d9%86%d8%af%d9%87-sticky-menu.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%86%d9%88%db%8c-%da%86%d8%b3%d8%a8%d9%86%d8%af%d9%87-sticky-menu.html#comments Tue, 27 May 2014 16:02:58 +0000 http://xn--mgbguh09aqiwi.com/?p=1487 برای این ساعت از سایت اسکریپت دات کام , آموزش ساخت یک منو چسبنده که حتما در خیلی از سایت ها دیده اید میپردازیم .

با استفاده از این آموزش قادر خواهید بود تا مِنو ( Navbar ) خود را درحالتی که کاربر مقدار خاصی از اسکرول بار سایت را پیمایش کرده و به پایین تر سایت رفته است , به صورت Fix نمایش دهید .

این کار باعث میشود تا کاربر شما , همیشه اصلی ترین جای یک وب سایت , که همان Navbar هست را مشاهده نماید .

ساخت چنین امکانی اصلا سخت نبوده و فقط نیاز به یک قطعا کد Jquery و Css است .

آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css

و اما آموزش :

1 – ابتدا باید سایت شما باید توانایی شناخت کتابخانه و فایل Jquery را داشته باشد .

پس اگر ندارد , باید به سایت Jquery.com رفته و آخرین ورژن Jquery را در این سایت دانلود نموده , در سایت خود آپلود نمایید  و سپس برای شناسایی این فایل به سایت خود , کد زیر را در بین دو تگ <head>و<head/> قرار دهید .

<script src="آدرس فایل جی کوئری"></script>

ضمنا میتوانید به صورت مستقیم , فایل جی کوئری را از سایت مرجع در سایت خود درج نمایید . ( به دلیل پایین آمدن سرعت سایت , این کار توصیه نمیشود )

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

2 – کد زیر را به فایل css خود اضافه نمایید .

.nav-fix{
	position:fixed;
	top:0px;
	z-index:1000;
}

3 – کد زیر را در سایت خود اضافه نمایید .

<script>
$(document).ready(function() {
$(document).scroll(function(){
	x = $(document).scrollTop();
	if ( x > vm_number ) {
		$("vm_id_class").addClass("nav-fix");
	}else{
		$("vm_id_class").removeClass("nav-fix"); } 
});
});
</script>

 نکات بسیار مهم در مورد بالا :

* اگر از سایت های استاتیک و html استفاده مینمایید , طبیعتا باید کد بالا را در تمامی صفحات کپی نمایید . برای مثال ( index.html , contact.html , about.html ) و اگر مثلا از وردپرس استفاده نمایید , کافیست یک بار در footer.php یا header.php کپی نمایید .

* وقتی اسکرول سایت را به سمت پایین میکشیم , فاصله ای از بالای سایت ( برحسب پیکسل ) میگیرد .

پس به جای vm_number , عددی که میخواید از آن عدد به بعد , navbar  به بالای سایت شما بچسبد را وارد نمایید .

بهتر است این عدد , مقدار ارتفاع header سایت باشد . اگر این مقدار را بدهید , وقتی header سایت از دید کاربر محو شد , navbar به صورت چسبنده در میاید . ( مثلا 200 )

* به جای vm_id_class , باید id یا class منوی خود را وارد نمایید . مثلا اگر دیویژن منوی شما به صورت زیر است , باید navbar# را بنویسید :

<div id="navbar">	
</div>

یا اگر به صورت زیر است , باید navbar. را وارد نمایید :

<div class="navbar">
</div>

نکته : با کمی خلاقیت و استفاده از آموزش بالا , میتوانید بجز Navbar , هر قسمتی از سایت را که میخواهید , بعد از هر مقدار اسکرولی که میخواهید , به صورت چسبده در آورید . حتا اگر با css آشنایی بیشتری دارید , میتوانید بجز خاصیت چسبندگی , رنگ , سایز , محو شدن , رنگ ضمینه و … هر قسمتی را که میخواهید تغییر دهید .

دموی آماده شده

 گرداوری : وحید مجیدی 

پخش اختصاصی

فایل ساخته شده مراحل بالا به صورت آماده

[sdm_download id=”1492″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%86%d9%88%db%8c-%da%86%d8%b3%d8%a8%d9%86%d8%af%d9%87-sticky-menu.html/feed 47