한 걸음씩

[JS] 반응형 Navbar, Sidebar 만들기 본문

JS

[JS] 반응형 Navbar, Sidebar 만들기

winter17 2023. 7. 7. 19:04

[Navbar 요구사항] 

브라우저 크기를 줄였을 때 menu아이콘이 나타나고

menu아이콘을 눌렀을 때 메뉴창이 등장하면서 메뉴들이 세로로 정렬되어 나타남.

menu아이콘을 눌렀을 때 메뉴 창이 사라짐

 

// index.html
<body>
  <nav>
    <div class="title">Coding<span>Addict</span></div>
    <div class="menu1">
      <a href="./Index.html">Home</a>
      <a>About</a>
      <a>Projects</a>
      <a>Contact</a>
    </div>
    <div class="social-link">
      <a href="https://ko-kr.facebook.com/"><img src="./images/facebook.png" alt=""></a>
      <a href="https://www.instagram.com/"><img src="./images/instagram.png" alt=""></a>
      <a href="https://kr.linkedin.com/"><img src="./images/linkedin.png" alt=""></a>
      <a href="https://www.pinterest.co.kr/"><img src="./images/pinterest.png" alt=""></a>
      <a href="https://twitter.com/i/flow/login?redirect_after_login=%2F%3Flang%3Dko"><img src="./images/twitter.png" alt=""></a>
    </div>
    <!-- menu bar 만들어서 menu -->
    <div class="menu2 menu-hidden">
      <span class="material-symbols-outlined menu-icon">menu</span>
    </div>
  </nav>
  <div class="scroll-menu hidden">
    <a href="./Index.html">Home</a>
    <a>About</a>
    <a>Projects</a>
    <a>Contact</a>
  </div>
  <script src="app.js"></script>
</body>

 

// app.js
const scrollMenu = document.querySelector('.scroll-menu')
const menuIcon = document.querySelector('.menu-icon')

function onScrollMenu(){
  scrollMenu.classList.toggle('hidden')
}
menuIcon.addEventListener('click', onScrollMenu)

CSS 파일에서 브라우저 크기를 미디어 쿼리를 사용하여 800px 두고 설정값을 나눠줬는데

800px이 되면 기존의 navbar가 사라지고 menu아이콘이 나타나서 

menu 아이콘을 눌렀을 때 세로로 메뉴들이 정렬되도록 구현하였다.

 

display:none;으로 설정한 hidden 클래스를 두고

HTML 파일에서 필요한 부분에 hidden 클래스를 작성해서

JS에서 toggle을 하여 조절하였다

[Sidebar 요구사항] 

menu 아이콘을 눌렀을 때 사이드에서 

메뉴가 세로로 정렬되어 나타나고 

x 표시를 눌렀을 때 사이드 창이 사라짐

// index.html
<body>
  <span class="material-symbols-outlined menu">menu</span>
  <div class="side-bar hidden">
    <div>
      <h1 class="title">Coding <span>Addict</span></h1>
      <span class="material-symbols-outlined close-icon">close</span>
      <p>Home</p>
      <p>About</p>
      <p>Projects</p>
      <p>Contact</p>
    </div>
    <div class="social-link">
      <a href="https://ko-kr.facebook.com/"><img src="./images/facebook.png" alt=""></a>
      <a href="https://www.instagram.com/"><img src="./images/instagram.png" alt=""></a>
      <a href="https://kr.linkedin.com/"><img src="./images/linkedin.png" alt=""></a>
      <a href="https://www.pinterest.co.kr/"><img src="./images/pinterest.png" alt=""></a>
      <a href="https://twitter.com/i/flow/login?redirect_after_login=%2F%3Flang%3Dko"><img src="./images/twitter.png" alt=""></a>
    </div>
  </div>
  <script src="app.js"></script>
</body>

위에서 구현한 navbar와 같은 방식인데 display: none;을 가진 hidden클래스를 두고

JS에서 toggle하여 menu 아이콘을 클릭할 때마다 사이드 바 메뉴를 열었다 닫았다 할 수 있도록 구현하였다.

// app.js
const menuBtn = document.querySelector('.menu')
const sideBar = document.querySelector('.side-bar')
const closeBtn = document.querySelector('.close-icon')

function onClickSidebar(){
  sideBar.classList.toggle('hidden')
}

function onClickCloseBtn(){
  sideBar.classList.add('hidden')
}

closeBtn.addEventListener('click', onClickCloseBtn)
menuBtn.addEventListener('click', onClickSidebar)

'JS' 카테고리의 다른 글

[JS] Modal 만들기  (0) 2023.07.10
[JS] FAQ(자주 묻는 질문) 페이지 만들기 ✅  (0) 2023.07.10
[JS] Carousel 만들기  (0) 2023.07.06
[JS] Number Counter 만들기  (0) 2023.07.06
[JS] Random Color 2 - color flipper 만들기  (0) 2023.07.06
'JS' Related Articles more