5. [JQuery] Navbar 애니메이션 넣기 (부가 navbar 기능 추가)

이번 포스팅에서는 페이지 상단에 위치해있는 메뉴를 클릭했을 때 내려오는 navbar에 대해서 알아보도록 하겠습니다. 

 

[click 이전]

 

[click 이후]

 

---

 

navbar 클릭시 애니메이션 추가

우선 바로 이전 포스팅에서 다룬 모달창 UI 를 개발하는 방법에 의거하여 개발을 진행해보도록 하겠습니다. 

[모달창 UI 만드는 방법] 1. HTML 로 미리 디자인 해놓는다.  2. 숨겨 놓는다.  3. 버튼을 눌렀을 때 다시 보여준다. (이걸 JS 혹은 Jquery의 이벤트 리스너로 해결)

 

[ 1. HTML 로 미리 디자인 해놓는다 ]

 

클릭 했을 때 나오게 될 UI를 미리 만들어 놓아야 합니다. 

이번 navbar 를 만들때는 부트스트랩의 List-Group 을 사용하겠습니다. 

 

https://getbootstrap.com/docs/4.6/components/list-group/

List group

 

기존에 존재하는 페이지 상단의 navbar 

 

HTML

    <div class='nav-menu'>
        <h4 style='margin:0'>Fashion Mall</h4>
        <p style='flex-grow: 1'></p>
        <a id='show-nav'>Our Products</a>
    </div>

 

CSS

.nav-menu {
    display: flex;
    align-items: center;
    padding : 15px;
    cursor: pointer;
}

 

click 시 나오게 되는 navbar

HTML (부트스트랩)

<ul 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>

 

[ 2. 숨겨 놓는다. ] 

: user가 클릭하기 이전 까지 해당 navbar를 숨겨놓아야 합니다. 

.list-group {
    display: none;
}

 

 

[ 3. 버튼을 눌렀을 때 다시 보여준다. (이걸 JS 혹은 Jquery의 이벤트 리스너로 해결) ]

: Our Product를 클릭했을 때 list-group이 열려있다면 닫아주고 닫혀있다면 열어주는 animation을 구현합니다. 

 

 $('#show-nav').on('click', function() {
        $('.list-group').slideToggle();
  })