본문 바로가기
dev/javascript

[javascript] 자바스크립트 반응형 메뉴 (navigation bar)

by 최연탄 2023. 3. 29.
728x90
반응형

참고: https://levelup.gitconnected.com/how-to-create-a-responsive-navigation-bar-with-and-without-javascript-81f6d0671c6d

많은 페이지를 가진 웹 사이트를 만들어야 한다고 할 때, 사용자가 쉽게 페이지에 액세스할 수 있도록 각 페이지를 디자인하는 것은 노력이 필요합니다. 따라서 사용자가 쉽게 사용할 수 있도록 웹 사이트에 내비게이션 바를 구현해야 합니다.

내비게이션 바를 추가하면 데스크톱 화면에서 웹사이트를 더 쉽게 사용할 수 있습니다. 하지만 모바일 및 태블릿 화면은 어떻게 해야할까요? 모바일은 인터넷 사용량의 50% 이상을 차지합니다. 따라서 navbar를 반응형으로 만드는 것은 중요합니다.

이 포스트에서는 JavaScript를 사용하여 반응형 내비게이션을 만드는 방법을 알아보겠습니다.

내비게이션 바 만들기

먼저 프로젝트를 시작하기 전에 HTML 파일의 head 태그 안에 다음을 넣어야합니다.

<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

첫 번째는 CSS 파일이고 두 번째는 메뉴 아이콘에 사용되는 font-awesome CDN입니다.

내비게이션 바에 다음 배경색을 사용할 것 입니다. 아래 코드는 재사용성을 위함 입니다. CSS 변수의 이해가 필요하다면 링크를 읽기 바랍니다.

:root {
    --bgcolor: #242582;
}

또 CSS 파일의 시작 부분에 다음의 style을  추가합니다.

* {
   margin: 0;
   padding: 0;
}

이렇게 하면 모든 요소에 대해 margin과 padding이 제거됩니다.

페이지 헤더

내비게이션 바를 넣을 페이지 헤더를 생성합니다.

<div class="page-header">
    <!-- Your nav-bar comes here -->
</div>

다음 style을 추가합니다.

.page-header {
    background-color: #242582;
    padding: 1.3rem;
    display: flex;
    justify-content: flex-end;
}

디자인 부분은 이 포스트의 범위를 넘어가기 때문에 배경색은 임의로 지정했습니다.

내비게이션 링크

이제 내비게이션 링크를 주가하겠습니다.

<div id="navigation-bar" class="nav-bar">
    <a class="active"> HOME </a>
    <a> PROFILE </a>
    <a> ABOUT </a>
    <a> SIGN IN </a>
</div>

아래는 각 하이퍼링크 요소의 스타일입니다. "display: inline"을 사용하여 한 줄에 요소를 표시하고, 현재 페이지를 나타내는 active 링크에 다른 색상을 가지게 합니다.

.nav-bar a   {
    color: white;
    padding: 1.3rem;
    cursor: pointer;
}
.nav-bar a.active {
    background-color: #f64c72;
}

반응형

이제 데스크톱 화면용 내비게이션 바를 만들었습니다. 중소형 화면의 경우 내비게이션 링크 대신 메뉴 아이콘을 사용하겠습니다. 아이콘은 font-awesome을 사용했습니다.

<a id="menu-icon" class="menu-icon">
    <i class="fa fa-bars"></i>
</a>

처음 넓은 화면에서는 아이콘이 보이지 않지만 작은 화면에서는 아이콘이 보일 것 입니다. 이를 구현하기 위해 미디어 쿼리를 사용했습니다.

.menu-icon {
    color: white;
    cursor: pointer;
    display: none;
}
@media screen and (max-width: 850px) {
    .menu-icon {
        display: block;
   }
}

작은 화면에서는 내비게이션 링크를 안보이게 할 것이므로 미디어 쿼리 아래에 다음 스타일을 추가합니다.

.nav-bar {
    display: none;
    position: absolute;
    top: 3.7rem;
    left: 0;
    width: 100%;
    background-color: var(--bgcolor);
    text-align: center;
}

내비게이션 바는 화면의 전체 너비를 차지합니다. "position: absolute" 상단 및 왼쪽을 기준으로 표시하도록 정의했으므로 부모 요소가 아닌 뷰포트 기준으로 위치가 지정됩니다.

JavaScript를 사용해 메뉴 기능 추가

작은 화면의 내비게이션 바는 메뉴 아이콘을 클릭하여 토글해야 합니다. 이를 구현하려면 메뉴 아이콘에 onClick="onMenuClick()" 속성을 추가해야합니다. 그러면 아이콘을 클릭했을 때 자바스크립트 함수가 호출됩니다. 이제 해당 기능을 구현해 보겠습니다.

function onMenuClick() {
    var navbar = document.getElementById('navigation-bar');
    var responsive_class_name = 'responsive'
    navbar.classList.toggle(responsive_class_name)
}

먼저 내비게이션 바의 요소를 가져오고 요소에 반응하는 클래스 명을 토글합니다. 이 함수는 실행될 때마다 클래스를 추가하고 제거합니다. 다음으로 미디어 쿼리 내부에 반응형 클래스에 대한 스타일을 추가합니다.

.nav-bar.responsive {
    display: block;
}

반응형 클래스를 추가하면 내비게이션 바의 "display: none" 속성을 덮어쓰고 "display: block"으로 대체하며 제거하면 이전 속성을 다시 가져옵니다.

전체 코드 및 데모는 내비게이션 바 예제에서 확인할 수 있습니다.

전체 코드

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="styles.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="page-header">
    <a id="menu-icon" class="menu-icon" onclick="onMenuClick()">
      <i class="fa fa-bars"></i>
    </a>

    <div id="navigation-bar" class="nav-bar">
      <a class="active"> HOME </a>
      <a> PROFILE </a>
      <a> ABOUT </a>
      <a> SIGN IN </a>
    </div>
  </div>

  <script src="index.js">
  </script>
</body>

</html>

styles.css

:root {
  --bgcolor: #242582;
}

* {
  margin: 0;
  padding: 0;
}

.page-header {
  background-color: var(--bgcolor);
  padding: 1.3rem;

  display: flex;
  justify-content: space-between;
}

.nav-bar a {
  color: white;
  padding: 1.3rem;
  cursor: pointer;
}

.nav-bar a:hover {
  background-color: #5052db;
}

.nav-bar a.active {
  background-color: #f64c72;
}

.menu-icon {
  color: white;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 700px) {
  .nav-bar {
      display: none;
      position: absolute;
      top: 3.7rem;
      left: 0;
      width: 100%;
      background-color: var(--bgcolor);
      text-align: center;
  }

  .nav-bar.responsive {
      display: block;
  }

  .nav-bar a {
      display: block;
  }

  .menu-icon {
      display: block;
      z-index: 1;
  }
}

index.js

function onMenuClick() {
  var navbar = document.getElementById('navigation-bar');
  var responsive_class_name = 'responsive'

  navbar.classList.toggle(responsive_class_name)
}

정리

내비게이션 바가 있으면 사용자가 웹 사이트의 다른 페이지를 탐색하는 데 도움을 줍니다. 그리고 반응형 타입도 있어야 합니다. 이번 포스트에서는 반응형 내비게이션 바를 구현하는 방법을 알아봤습니다. 다음 프로젝트에 도움이 되었으면 합니다.

반응형
저작자표시 비영리 변경금지

'dev > javascript' 카테고리의 다른 글

[javascript] 자바스크립트 로그인 페이지 만들기 (login)  (7) 2023.04.16
[javascript] 자바스크립트 브라우저 탭 열기 닫기  (5) 2023.03.30
[javascript] 자바스크립트 apply() 사용 예제  (3) 2023.03.28
[javascript] 자바스크립트 퍼센트, 백분율 구하기  (4) 2023.03.24
[javascript] 자바스크립트 라디안(radians)을 각도(degrees)로 변환  (2) 2023.03.21

관련글

댓글

티스토리툴바