fixed-menu-on-scroll

چگونه منوی ثابت بسازیم؟

در این چند وقت  طراحی سایت های تک صفحه و پارالکس اسکورولینگ افزایش یافته است! قبلا دلیل این رواج یافت را گفتیم که عمده ترین آن جذب بازدیدکننده به وبسایت بود!

جز جدایی ناپذیر این نوع طراحی استفاده از منوهای ثابت است! این منو ها با قرارگرفتن در بالای صفحه این امکان را فراهم می آورد تا کاربران بتوانند به راحتی به بخش های مختلف سایت دسترسی داشته باشند!

حالا می خواهیم به این سوال پاسخ دهیم که چگونه منوی ثابت بسازیم؟

بطور مثال وقتی می خواهیم اسکرول کنیم در صفحه منو همراه با اسکورل به پایین بیاید برای اینکار کافی ست تا از کد های جاوااسکریپت کمک بگیریم به این صورت!


jQuery(function($){
$(window).on('scroll',function(){
if ($(window).scrollTop()>90) {
$('.Menu').addClass('Menu-Fix');
}else{
$('.Menu').removeClass('Menu-Fix');
}
})

 خب! حالا باید خود منو را در html بنویسیم

<div class=”Menu”>
<nav>
<ul class=”sf-menu”>
<li><a href=”/”>خانه</a></li>
<li><a href=>طراحی سایت</a></li>
<li><a href=”/Post”>نمونه کارها</a></li>
<li><a href=”/contact”>درباره ما</a></li>
</ul>
</nav>
</div>

و می توانید برای شکل منو هم این کد css را اضافه کنید!!

.Menu-Fix {
background-color: #ffff;
height: 45px;
left: 0;
padding: 3px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

 

حالا شما یک منوی ثابت در صفحه خود دارید!! به اینها اکتفا نکنید! سعی کنید خودتان اینها را توسعه دهید !! از امتحان کردن نترسید! سوالی بود در خدمتیم!

0 پاسخ

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *