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

자바스크립트 (JavaScript)

 

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

 

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

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

 

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

이것도 탑메뉴 중에서 자주 쓰이는 형태중 하나입니다.

이건 3차메뉴까지 존재하는 경우인데 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.

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

 

이 형태는 3차메뉴까지 보여줘야 하기에 반응형 1240px 에서 모바일 토글버튼으로 변하게 작업된 상태입니다.

그래서 현재 블로그 게시글에서는 너비가 작아 모바일 형태로 보이네요 ㅎㅎ..

자세히 확인하시려면 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)

 

// 헤더 gnb 스크립트
let header = $('.header');
const DEFAULT_HEADER_HEIGHT = 90;
const DURATION = 500;
initGnb(header);

function initGnb(header) {
  let gnb = header.find('.header-gnb');
  let gnbMenu = gnb.find('.gnb-depth-1 .depth-1');
  let gnbMenuLink = gnb.find('.gnb-depth-1 .depth-1 > a');
  let depthItem = gnb.find('.depth-item');

  header.on('mouseleave', function(){
    gnbClose(header, depthItem);
  })
  
  gnbMenu.on('mouseenter focusin', function(){
    $(this).addClass('current');
  });
  gnbMenu.on('mouseleave focusout', function(){
    $(this).removeClass('current');
  });
  
  gnbMenuLink.on('mouseenter focusin', function(){
    let otherItems = $('.header-gnb .depth-item');
    let item = $(this).siblings('.depth-item');
    otherItems.hide().css('opacity', '0');
    gnbOpen(header, item);
  });
  
  gnbMenu.find('a').last().on('focusout', function(){
    gnbClose(header, depthItem);
  });

  function gnbOpen(header, item){
    let itemHeight = calculateMaxHeight(item);
    let headerHeight = itemHeight + DEFAULT_HEADER_HEIGHT;
    header.stop().animate({
      height: headerHeight,
    }, DURATION);
    item.show().stop().animate({
      opacity:1,
    }, DURATION);
    header.addClass('open');
  }

  function gnbClose(header, item){
    header.stop().animate({
      height: DEFAULT_HEADER_HEIGHT,
    }, 0);
    header.removeClass('open');
    item.hide().css('opacity', '0');
  }

  function calculateMaxHeight(item){
    let height = item.outerHeight(true);
    return height;
  }
}

// 모바일 헤더 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 thisLink = $(this);
    onClickMobileMenu(thisLink);
  });

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

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

  function onClickMobileMenu(link){
    let target = link.parent();
    let depthTarget = link.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);
    }
  }
}

 

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

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