[CSS] 햄버거 버튼으로 반응형 애니메이션 Navbar 만들기

이번시간에는 햄버거 버튼을 사용하여 모바일 버전 Navbar 메뉴바를 만들겠습니다.

소개하는 Navbar 메뉴바는 반응형으로 제작되어 PC 버전도 있고 모바일 버전도 있습니다.

그럼 Navbar 메뉴바에 애니메이션을 추가하면서 직접 제작하는 과정을 보여드리겠습니다.

1. 홈페이지 반응형 Navbar 만들기 - HTML

2. 홈페이지 반응형 Navbar 만들기 - CSS

3. 홈페이지 반응형 Navbar 만들기 - JavaScript

4. 홈페이지 반응형 Navbar 만들기 - 결과화면

1. 홈페이지 반응형 Navbar 만들기 - HTML

HTML 문서에서 PC버전과 모바일 버전 총 2개를 입력합니다.

2개의 코드는 id나 class가 겹치지 않기때문에 동시에 사용가능 합니다.

그러나 CSS에서 사용하실 때는 미디어 쿼리를 이용해야 합니다.

여기서 사용하는 햄버거 아이콘은 부트스트랩에서 가지고 왔습니다.

주소 : 부트스트랩 아이콘 링크

1. HTML 코드 - PC 버전

<!-- PC 버전 -->
<div class="navbar_main">
  <a class="navbar_logo" href="#">로고</a>
  <div class="navbar_links">
    <a href="#">ABOUT</a>
    <a href="#">WORKS</a>
    <a href="#">NEWS</a>
    <a href="#">CONTACT</a>
  </div>
</div>

navbar_main으로 전체 태그를 묶습니다.

navbar_logo에는 로고가 들어갑니다. 

navbar_links에는 메뉴 링크가 들어갑니다.

2. HTML 코드 - 모바일 버전

<!-- 모바일버전 -->
<div class="navbar_overlay"></div>

<div class="navbar_burger">
  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
  </svg>
</div>

<div class="navbar_menu">
  <a href="#">ABOUT</a>
  <a href="#">WORKS</a>
  <a href="#">NEWS</a>
  <a href="#">CONTACT</a>
  <div class="navbar_burger_back">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
      <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
    </svg>
  </div>
</div>

navbar_overlay는 버거버튼을 클릭했을 때 외부 화면을 고정시키는 역할입니다.

navbar_burger는 메뉴바 실행 버튼으로 부트스트랩 svg 태그입니다.

navbar_menu으로 전체 태그를 묶고 해당 메뉴바들과 버거 버튼을 넣어줍니다.

navbar_burger_back는 메뉴바 취소 버튼으로 부트스트랩 svg 태그입니다.

HTML 기본 구조를 소개해봤습니다.

2. 홈페이지 반응형 Navbar 만들기 - CSS

다음으로는 CSS 코드를 소개하겠습니다.

PC 버전과 모바일 버전으로 구성되어 있습니다.

클래스가 겹치기 때문에 동시에 사용하기 위해서는 미디어 쿼리로 분리해야 합니다.

주소 : 미디어 쿼리 사용법

1. CSS 코드 - PC 버전

/* PC 버전 */
.navbar_main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  color: #000;
  z-index: 999;
  animation: navbarBottom 1s forwards;
}

.navbar_links {
  margin-right: 10%;
}

.navbar_links a {
  text-decoration: none;
  color: #000;
  margin-right: 4rem;
  font-size: 0.9rem;
  font-weight: 600;
  position: relative;
  padding: 0.5rem 0;
}

.navbar_links a:last-child {
  margin-right: 0;
}

.navbar_links a::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #792626;
  transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}

.navbar_links a:hover::before {
  width: 100%;
  left: 0;
}

.navbar_logo {
  margin-left: 10%;
  text-decoration: none;
  color: #000;
  font-size: 2.3rem;
  font-weight: 500;
}

.navbar_scroll {
  background-color: #fff;
  z-index: 5;
  border-bottom: 1px solid gray;
}

.navbar_scroll div a {
  color: black;
}

.navbar_scroll a {
  color: black;
}

@keyframes navbarBottom {
  0% {
    transform: translateY(-70%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

navbar_main : 전체 영역이며 position값을 fixed로 맞춰줘야 합니다.

또한 로고와 메뉴 부분을 나눴기 때문에 justify-content: space-between를 입력합니다.

animation을 넣고 위에서 아래로 내려오게 설정했습니다.

navbar_links : 네비게이션 메뉴 영역으로 margin과 위치 설정을 했습니다.

navbar_logo : 네비게이션 로고 영역으로 폰트 설정하고 로고에 글자 크기를 조절했습니다.

navbar_scroll : 일정 스크롤이 내려오면 배경색이 나오도록 설정했습니다. 여기는 자바스크립트가 추가됩니다.

2. CSS 코드 - 모바일 버전

/* 모바일 버전 입력*/
.navbar_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.navbar_burger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  color: #000;
}

.navbar_burger_back {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  cursor: pointer;
  color: #fff;
}

.navbar_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #0e0e0e;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transform: translateX(100%);
  z-index: 999;
  color: #000;
  transition: transform 0.3s ease;
}

.navbar_menu a {
  position: relative;
  color: #ffffff;
  font-size: 1.5rem;
  margin-left: 1rem;
  margin-bottom: 3rem;
  text-decoration: none;
}

.navbar_menu.active {
  transform: translateX(0);
}

.navbar_overlay.active {
  opacity: 1;
  pointer-events: auto;
}

navbar_overlay : 전체 화면으로 navbar 메뉴바가 실행될 때 클릭방지를 위해 만들었습니다.

navbar_burger : 위치를 이동시켜 오른쪽 상단에 고정시켜 줍니다.

navbar_burger_back : 위치를 이동시켜 오른쪽 상단에 고정시켜 줍니다.

navbar_menu : 버거가 클릭됐을 때 나오도록 설정했습니다.

3. CSS 코드 - 미디어 쿼리

@media (min-width: 992px) {
  /* PC 버전 CSS 입력*/

  .navbar_overlay {
    display: none;
  }

  .navbar_burger {
    display: none;
  }

  .navbar_menu {
    display: none;
  }
}

@media (max-width: 991.98px) {
  /* 모바일 버전 CSS 입력*/

  .navbar_main {
    display: none;
  }
}

만약 PC 버전과 모바일 버전 동시에 사용하고자 한다면 위의 코드를 넣어주면 됩니다.

주석처리한 부분에 CSS를 넣으면 동시에 사용할 수 있습니다.

992px을 기준으로 분리된 반응형 Navbar 메뉴바입니다.

3. 홈페이지 반응형 Navbar 만들기 - JavaScript

자바스크립트에서는 아까 입력한 navber_scroll과 navber_burger를 설정해야 합니다. 

자연스러운 모션과 버튼 구현을 위해 꼭 추가해야 합니다.

1. JavaScript 코드 - 스크롤

<script>
  var darkBackground = document.querySelector(".dark-background");
  var navbar = document.querySelector(".navbar_main");

  function handleNavbarScroll1() {
    var windowHeight = window.innerHeight;
    var scrollPosition = window.scrollY;

    var darkBackgroundHeight = darkBackground.offsetHeight;
    var darkBackgroundTop = darkBackground.offsetTop;

    var triggerPosition1 = darkBackgroundTop + (darkBackgroundHeight * 0.9);

    if (scrollPosition >= triggerPosition1) {
      navbar.classList.add("navbar_scroll");
    } else {
      navbar.classList.remove("navbar_scroll");
    }
  }

  window.addEventListener("scroll", handleNavbarScroll1);
  window.addEventListener("resize", handleNavbarScroll1);
</script>

Navbar 메뉴바가 dark-background에 90% 지점까지 가면 배경색이 추가됩니다.

dark-background는 홈페이지 메인 이미지로 이미지에서 내려갈 때 배경색이 추가되는 효과입니다.

또한 애니메이션 효과를 추가해 opacity와 text모션을 넣었습니다.

2. JavaScript 코드 - 버거버튼

<script>
  const navbarBurger = document.querySelector('.navbar_burger');
  const navbarburgerback = document.querySelector('.navbar_burger_back');
  const navbarMenu = document.querySelector('.navbar_menu');
  const navbarOverlay = document.querySelector('.navbar_overlay');

  navbarBurger.addEventListener('click', () => {
    navbarMenu.classList.toggle('active');
    navbarOverlay.classList.toggle('active');
  });

  navbarburgerback.addEventListener('click', () => {
    navbarMenu.classList.remove('active');
    navbarOverlay.classList.remove('active');
  });

  navbarOverlay.addEventListener('click', () => {
    navbarMenu.classList.remove('active');
    navbarOverlay.classList.remove('active');
  });
</script>

버거버튼 온클릭에 이벤트 함수를 구현했습니다.

overlay가 클릭되면 취소되게 만들었습니다.

주소 : 자바스크립트 기초

4. 홈페이지 반응형 Navbar 만들기 - 결과화면

PC 버전에서는 왼쪽에 로고를 배치하고 오른쪽에 메뉴 링크를 배치했습니다.

모바일 버전에서는 햄버거 버튼이 생성되고 클릭 시 메뉴바가 나오도록 설정했습니다.

1. Navbar 메뉴바 PC 버전

2. Navbar 메뉴바 모바일 버전

3. Navbar 메뉴바 PC 결과화면

4. Navbar 메뉴바 모바일 결과화면

글을 마치며 홈페이지에 Navbar 메뉴바를 추가하는 방법을 알려드렸습니다.

또한 자바스크립트와 애니메이션 효과까지 구현해 반응형으로 제작해봤습니다.