آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css
برای این ساعت از سایت اسکریپت دات کام , آموزش ساخت یک منو چسبنده که حتما در خیلی از سایت ها دیده اید میپردازیم .
با استفاده از این آموزش قادر خواهید بود تا مِنو ( Navbar ) خود را درحالتی که کاربر مقدار خاصی از اسکرول بار سایت را پیمایش کرده و به پایین تر سایت رفته است , به صورت Fix نمایش دهید .
این کار باعث میشود تا کاربر شما , همیشه اصلی ترین جای یک وب سایت , که همان Navbar هست را مشاهده نماید .
ساخت چنین امکانی اصلا سخت نبوده و فقط نیاز به یک قطعا کد 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″]
سلام من این کد رو برای یکی از منو های ساید بارم گذاشتم
فقط یه مشکلی که دارم اینه که میخوام وقتی به فوتر میرسه توقف کنه
میشه راهنمایی کنید
میشه دمو بدید دوست عزیزم
دمو نیست روی خود سایت گذاشتم
http://www.searcha.ir
دمو رو دیدم . دقیقا چی توقف کنه
منو برترین مطالب و منو موزیک های اخیر به فوتر که میرسه
یا مثلا به 500px مونده به اخر سایت توقف کنه و پایینتر نره
میشه جواب بدید؟
آقا دمت گرم.عاااااااالی بود
بسیار عالی بود، ممنون بابت به اشتراک گذاری
واقعا خوشم اومد من حرفه اصلیم اندرویده ولی وبم کار میکنم یکی از قالباتم از بیگ تم دانلود کردم خیلی باحالی
نمیشه خواهش میکنم کمک کن واقعا نیاز دارم
لطفا دمو بزاید دوست عزیزم
عالیه حل شد ولی از شما تقاضای یه آموزش دارم.میشه ساخت search.php حرفه ای بدید یعنی منظورم اینه میخوام وقتی یه چیزی سرج شد بنویسه “نتایج جستجو برای x ” که x همون کلمس و دیگری این که اگه پاسخی یافت نشد بگه یافت نشد.ممنونم منظورم از search.php تو وردپرس بود
با سلام . لطفا در تالار گفتمان بیان کنید تا سریعا برایتان گذاشته شود . با تشکر
سلام آقای مجیدی
ممنونم واقعا
آموزشات سایت شما برای من نسبت به هر سایت دیگه ای الویت دارن
خیلی عالی توضیح دادین
مچکرم
متشکرم.
عالی بود. کارم رو راه انداخت.
مرسی از آموزش ، اگه علاوه بر بالای منو ، پایینش هم یه نوار باشه چجوری میشه کاری کرد که این دو تا نوار نیان بهم بچسبن بعد از جابجایی منو ؟
باید کدنویسی jquery کرد دوست عزیزم و اینجا نمیتونم بگم . ایشالله آموزش های ساده کاربردی رو دنبال کنید تا به jquery برسیم
تشکر . فک کنم با absolute کردن منو هم میشه این کار رو کرد .
سلام ممنون از مطلب مفیدتون
اگه بخوایم لوگو هم کوچیک بشه و توی این منو قرار بگیره موقع اسکرول عین خیلی از سایت ها که اینطوری هستن چه کار باید کرد
دوست عزیزم به راحتی میتونید توی if اولی دستورات css رو برای کوچک کردن لوگو بیان کنید .
به دلیل نداشتن اطلاعات از css سایت شما , نمیتونم دقیقش رو براتون بنویسم
ممنون از آموزش عالیتون ، هر جا دنبال چنین آموزشی گشتم چیز بدرد بخوری پیدا نکردن تا با سایت شما آشنا شدم ، موفق باشید .
سلام
آقا دستتون درد نکنه عالی بود
با سلام
تشکر بابت اشتراک گذاری
من برای منوی سمت راست استفاده کردم
که با پایین آمدن و رسیدن به آخر
با فوتر به مشکل میخورد
اگر کدی هست که تایین کنیم مثلا 500 تا مونده به آخر صفحه منو اِستُپ بشه یعنی همونجا بمونه اشتراک بگذارید خیلی ممنون میشم
دوست عزیزم در جیکوئری فقط اسکرول از بالا داریم
بسیار جالب بود
خیلی ممنون بابت وب سایت خوبتون
داداش منظورم اینه که وقتی میایم پایین صفحه نوار نشون داده بشه وقتی میریم بالای سایت اتو ماتیک محو بشه
باید در هنگاه بالا رفتن , display:none کنی
سلام خسته نباشید من میخوام وقتی نوار رو ببریم پایین این نواره فعال بشه وقتی میاریمش بالا پیش هدر ناپدید بشه باید چی کار کنیم
متوجه نشدم داداشی , بیشتر توضیح میدی
خیلی ممنون بابت سایت عالیتون
بله داداشه گلم
ممنون مثل سایت خودت باشه ممنون میشم
با سپاس
میتونی از این افزونه رایگان استفاده کنی …
https://wordpress.org/plugins/scroll-back-to-top/
دادا میشه این کد اسکرل به بالا که گوشه صفحه سمت راست هست رو هم بذارید
class=”fa fa-2x fa-arrow-circle-up
ممنون میشم :X:X:X
از سیستم وردپرس استفاده میکنی داداشی ؟
ممنون پیدا کردم
با سپاس فراوان
#navbar:hover{
}
داخلش باید برا color چه کدی بزنم ممنون
دقیقا میخوای چیکار انجام بشه تا کدش رو بنویسم
ضمنا اسمی که برای navbar گذاشتید هم بگید
سلام دادا شرمنده سوال زیاد میکنما :D
دادا بخوام رو نوار بالا موس رو ببرم مثل سایت شما رنگش تغییر کنه
مثلا سایت شما در css باید چه دستوری بدم ممنون
به این حالت , hover میگن
کافیست تو css , مثلا اگر اسم نوار ابزار شما navbar# هست , میشه :
#navbar:hover{
}
ممنون کدوم پست سرچیدم پیدا نکردم :D:D:D
نه داداشی منظورم اینترنت بود , نه توی سایت من
ممنون عالی بود
اگر بخوایم رنگ قرمز رو مثلا آبی کنیم باید از کجا چنج کنیم و
میشه مثلا تو هم سایت شما رو صفخه اصلی موس رو موقعی که میبریم طوری بشه که زیر مجموعه باز شه
بازم سپاس گذارم
کافیه در css رنگ background رو عوض کنی …
ساخت منویی که باز شونده باشه رو توی یکی از پستام گذاشتم داداشی
تشکر.
موفق باشید.
سُلام داداشی بک لینک میفروشی؟برا ما فقیر بیچاره ها ی قیمت ایمیل میکنی؟مرسی….
سلام دوست عزیزم . تعرفه ها توی سایت هست . قیمت ها بسیار پایینه اگر یه گشتی بزنی تو نت
پرفکــــــــــــــــــــــــــــــــــــــــــــــــــــــت