[자바스크립트] 스크롤에 반응하는 sub메뉴 만드는 방법

자바스크립트 스크롤에 반응하는 서브 햄버거메뉴 만드는 방법 알아보기와 예제

 

 

스크롤을 내릴때 서브로 메뉴단추가 활성화되고, 반대로 올릴때는 비활성화된다.

 

스크롤에 반응하는 sub메뉴단추가 있다면 사용자 접근성이 높아진다.

보기 편하게 색깔별로 표시해두었습니다.

노란색 - 글자가 노란색인 설명을 본다. 

  

 

HTML

<div id="sub_menu">  <!--메뉴 영역, 스크롤시 is-fixed(js)가 활성화-->     <a href="#0" class="cd-nav-trigger">Menu<span></span></a>    <nav id="cd-main-nav">        <ul>  <!--스크롤시 has-transitions(js)가 활성화-->          <li><a href="#0">메뉴1</a></li>           <li><a href="#0">메뉴2</a></li>           <li><a href="#0">menu3</a></li>           <li><a href="#0">menu4</a></li>          <li><a href="#0">콜라</a></li>       </ul>     </nav>  </div>

 

 

CSS 길어서 파일첨부 했습니다.

스크롤에 반응하는 sub메뉴.css.txt

0.00MB

 

 

JS

jQuery(document).ready(function($){     var offset = 300;     var navigationContainer = $('#sub_menu'),         mainNavigation =      navigationContainer.find('#cd-main-nav'):     checkMenu();     $(window).scroll(function(){     checkMenu();     });     $('.cd-nav-trigger').on('click', function(){     $(this).toggleClass('menu-is-open');     //transitionEnd 이벤트를 제거(메뉴가 열린 상태에서 위로 스크롤 할 때 추가)     mainNavigation.off('webkitTransitionEnd      otransitionend oTransitionEnd     msTransitionEnd transitionend').toggleClass('is-visible');     });     function checkMenu() {     if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {     navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd     oanimationend msAnimationEnd     animationend', function(){     mainNavigation.addClass('has-transitions');     });   } else if ($(window).scrollTop() <= offset) {     //스크롤할때 메뉴가 열림     if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {     //애니메이션으로  메뉴닫기     mainNavigation.addClass('is-hidden').one('webkitTransitionEnd     otransitionend oTransitionEnd     msTransitionEnd transitionend', function(){     //메뉴가 닫힐 때까지 기다렸다가 나머지     mainNavigation.removeClass('is-visible is-hidden has-transitions');     navigationContainer.removeClass('is-fixed');     $('.cd-nav-trigger').removeClass('menu-is-open');     });     //위로 스크롤 할 때 메뉴가 열려 있는지 확인-전환이 지원되지 않는 경우 대체     } else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {     mainNavigation.removeClass('is-visible has-transitions');     navigationContainer.removeClass('is-fixed');     $('.cd-nav-trigger').removeClass('menu-is-open');     //scrolling up with menu closed     } else {     navigationContainer.removeClass('is-fixed');     mainNavigation.removeClass('has-transitions');     }     }      }  });