자바스크립트 제이쿼리 header gnb 탑메뉴 예제 1 (PC & 모바일)

자바스크립트 (JavaScript)

 

See the Pen header gnb 탑메뉴 예제 1 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen.

 

https://codepen.io/kimyangsun/pen/BaYKPXm

자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일)

자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다.

탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.

물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)

모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)

 

// 헤더 gnb 스크립트
let header = $('.header');
initGnb(header);

function initGnb(header){
  let gnb = header.find('.header-gnb');
  let gnbMenu = gnb.find('.gnb-depth-1 .depth-1');
  let depthMenu = gnb.find('.gnb-depth-2');
  let maxHeight = calculateMaxHeight();

  if (window.innerWidth > 1024) {
    changeMenuHeight(maxHeight);
  }

  gnb.on('mouseenter focusin', function(){
    gnbOpen(header);
  })
  gnb.on('mouseleave focusout', function(){
    gnbClose(header);
  })

  gnbMenu.on('mouseenter focusin', function(){
    $(this).addClass('current');
  })
  gnbMenu.on('mouseleave focusout', function(){
    $(this).removeClass('current');
  })

  $(window).on('resize', function(){
    if (window.innerWidth > 1024) {
      maxHeight = calculateMaxHeight();
      changeMenuHeight(maxHeight);
    }
  });

  function gnbOpen(header){
    let headerHeight = maxHeight + 90;
    header.css("height", headerHeight + "px").addClass('open');
  }

  function gnbClose(header){
    header.removeClass('open').removeAttr("style");
  }

  function calculateMaxHeight(){
    let heights = [];
    depthMenu.each(function(){
      let height = $(this).innerHeight();
      heights.push(height);
    });
    let maxHeight = Math.max.apply(null, heights);
    return maxHeight;
  }

  function changeMenuHeight(height) {
    depthMenu.css("height", height + "px");
  }
}

// 모바일 헤더 gnb 스크립트
let mobileGnb = $('.mobile-gnb');
initMobileGnb(mobileGnb);

function initMobileGnb(mobileGnb){
  let html = $('html');
  let sidebarButton = mobileGnb.find('.sidebar-btn');
  let mobileMenu = mobileGnb.find('.depth-1 > a');
  sidebarButton.on('click', function(){
    if (mobileGnb.hasClass('open')) {
      mobileGnbClose(mobileGnb);
    } else {
      mobileGnbOpen(mobileGnb);
    }
  });

  mobileMenu.on('click', function(){
    let $this = $(this);
    let target = $this.parent();
    let depthTarget = $this.siblings('ul');
    let otherLinks = target.siblings('li');
    let otherItems = otherLinks.find('ul');

    if (target.hasClass('current')){
      target.removeClass('current');
      depthTarget.stop().slideUp(300);
    } else {
      otherLinks.removeClass('current');
      otherItems.stop().slideUp(300);
      target.addClass('current');
      depthTarget.stop().slideDown(300);
    }
  });

  $(window).on('resize', function(){
    if (window.innerWidth > 1024) {
      mobileGnbClose(mobileGnb);
    }
  });

  function mobileGnbOpen(gnb){
    gnb.addClass('open');
    html.addClass('not-scroll');
  }

  function mobileGnbClose(gnb){
    gnb.removeClass('open');
    html.removeClass('not-scroll');
  }
}

 

자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일)

자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일)