[JS / javascript] togle menu 토글 메뉴의 종류 / navbar의 활용

흔히 navbar(메뉴바)를 만들 때 코드 몇 줄만으로 애니메이션 효과를 줄 수가 있숨

 

연습용 html

<h2>togle 연습이다잇!</h2>
  <div id="menu-btn" class="menu">메뉴</div>
  <ul id="list" class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
  </ul>

이렇게 html을 만들어 놈

 

참고로 list 부분은 Bootstrap이라는 라이브러리를 사용했다

css를 간편하게 해 주고 간단한 기능까지 넣어주는 최고 킹왕짱!

https://getbootstrap.com/docs/5.1/getting-started/introduction/

Introduction

여기서 스타트 템플릿을 복붙 해서 시작해도 됨

 

다시 돌아가서 메뉴를 클릭했을 때 툭 사라지는 게 아니라

 

스으윽~ 올라갔다가 스으윽~ 내려갔다가

서서히 사라졌다 서서히 나타났다 그런 거 해보겠다

 

스크립트

 <script>
    $('#menu-btn').click(function(){
      $('#list').slideUp();
    });
  </script>

slideUp

fadeOut

요런 효과들 있으시겠다

 

이거 말고도 몇 가지 효과들이 있으니 사용해 보기 바람

$('').hide(); 
$('').show(); 
$('').slideUp(); 
$('').slideDown(); 
$('').fadeOut(); 
$('').fadeIn();

 

출처 - 코딩애플