1. خانه
2. مقاله
3. متحرک سازی منو در طراحی سایت

متحرک سازی منو در طراحی سایت

---

ساختار پایه ای HTML

کد HTML که در زیر مشاهده می کنید اسکلت منوی ما می باشد.

   <div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">
        
      </div>
      <div class="nav">
        
      </div>
    </div>
  </div>

  <div class="content">
    
  </div>
</div>

اضافه کردن کمی style

حذف همه style های قبلی برای طول منو و 100% کردن طول container که کد CSS آنرا در زیر مشاهده می کنید:

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Banner Container

کد های CSS مربوط به بنر را در زیر مشاهده می کنید:

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Banner Section

کدهای CSS مربوط متحرک سازی منو در هنگام پایین آمدن در صفحه در زیر مشاهده می کنید:

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

Content Section

این کدهای CSS مربوط به عکس و متن background محتوا می باشد:

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

متحرک سازی منو در جاوا اسکریپت

با اسکرول کردن صفحه منو مخفی خواهد شد کد جاوا اسکریپتی زیر را مشاهده کنید:

(() => {
  'use strict';

  const handler = () => {
    //DOM manipulation code here
  };

  window.addEventListener('scroll', handler, false);
})();

مقدار دهی برخی از متغییرهای اوایه

متغییر اول refOffset برای نشان دادن فاصله تا پایین صفحه و یا رسیدن مقدار 0 حالت اولیه صفحه می باشد. متغییر bannerHeight برای ذخیره ارتفاع منو می باشد.

let refOffset = 0;
let visible = true;
const bannerHeight = 77;

const bannerWrapper = document.querySelector('.banner-wrapper');
const banner = document.querySelector('.banner');

کنترل جهت حرکت

ما نیاز به کنترل جهت حرکت در صفحه وب داریم تا در موقع لازم منو مخفی شود. ما نیاز به newOffset برای تعداد پیکسل عمودی صفحه داریم.

const newOffset = window.scrollY;

if (newOffset > bannerHeight) {
  // Menu out of view
} else {
  // Menu in view
}

اگر newOffset بزرگتر از refOffset باشد منو مخفی می شود و اگر کوچکتر باشد به جای خود بر می گردد.

if (newOffset > bannerHeight) {
// Menu out of view
if(newOffset > refOffset) {
  // Hide the menu
} else if (newOffset < refOffset) {
  // Slide menu back down
}

  refOffset = newOffset;
} else {
  // Menu in view
}

متحرک سازی منو

ما از دو متد animateOut و animateIn برای نمایش و مخفی کردن منو استفاده می کنیم.

if (newOffset > bannerHeight) {
if (newOffset > refOffset) {
  animateOut();
} else {
  animateIn();
}

  refOffset = newOffset;
} else {
  banner.style.backgroundColor = 'rgba(162, 197, 35, 1)';
}

دو متد متحرک سازی به شکل زیر می باشد:

function animateOut() {
  bannerWrapper.style.transform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.msTransform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.webkitTransform = `translateY(-${bannerHeight}px)`;
  bannerWrapper.style.MozTransform = `translateY(-${bannerHeight}px)`;
  banner.style.background = 'rgba(162, 197, 35, 0.6)';
}

function animateIn() {
  bannerWrapper.style.transform = 'translateY(0px)';
  bannerWrapper.style.msTransform = 'translateY(0px)';
  bannerWrapper.style.webkitTransform = 'translateY(0px)';
  bannerWrapper.style.MozTransform = 'translateY(0px)';
  banner.style.background = 'rgba(162, 197, 35, 0.6)';
}

آدرس منبع خارجی خبر