바닐라 JS navbar 만들기

내 personal website 에서 모든 JavaScript를 제거하고 HTML5의 세부 정보/요약 요소를 사용하여 내 웹 사이트의 다른 섹션을 선택적으로 표시하거나 숨겼습니다.

이로 인해 내 웹 사이트가 100% Lighthouse 성능 점수를 달성했지만 결과 모양이 마음에 들지 않았습니다. 따라서 동일한 작업을 수행하기 위해 간단한 navbar를 구축하기에 충분한 JavaScript를 다시 가져오기로 결정했습니다.

이것이 내 웹 사이트가 보이기를 원했던 방식입니다. 내 웹사이트에 처음 방문하고 탐색 모음에서 "Hello"버튼을 클릭하면 "정보"섹션이 표시됩니다.



"코드"버튼을 클릭하면 페이지의 코딩 프로젝트 섹션이 표시됩니다.



마지막으로 "연락처"버튼을 클릭하면 연락처 양식이 표시됩니다.



주목해야 할 핵심 사항은 이 세 섹션이 세 개의 개별 HTML 파일이 아니라 하나의 HTML 파일의 세 섹션이라는 것입니다. JavaScript는 이 세 섹션 중 두 개를 한 번에 숨기는 데 사용되어 세 개의 개별 파일이 있는 것처럼 보이게 합니다. 이것은 JavaScript가 비활성화되었을 때 볼 수 있습니다. 이 경우 3개 섹션이 모두 표시됩니다.



이 모양을 구현하기 위해 먼저 HTML에서 적절한 id 태그(<article id="about"> , <article id="code"> 및 <article id="contact"> )를 사용하여 About, Coding Projects 및 Contact Form 섹션을 식별했습니다.

navbar에서 Fontastic의 텍스트와 아이콘이 있는 앵커 요소인 각 버튼에는 고유한 ID가 있습니다.

<nav>
  <a id="nav-about">#Hello <i class="icon-smile-o"></i></a>
  <a id="nav-code">#Code <i class="icon-codepen"></i></a>
  <a id="nav-contact">#Contact <i class="icon-pencil"></i></a>
</nav>

CSS로 스타일을 지정하면 버튼은 다음과 같이 표시됩니다.



이러한 ID를 사용하면 이제 JavaScript를 사용하여 navbar의 각 버튼 요소를 HTML의 해당 기사 요소와 페어링하고 이벤트 리스너를 만들어 다른 버튼을 클릭할 때 웹 사이트의 모양을 변경할 수 있습니다.

먼저 네비게이션 바입니다. navbar는 JavaScript를 사용하여 웹 사이트의 모양을 제어하므로 어떤 이유로든 JavaScript가 브라우저에서 비활성화되어 있으면 쓸모가 없습니다. 이 상황에서는 navbar가 표시되는 것을 원하지 않습니다. 따라서 CSS에서 navbar는 기본적으로 숨겨져 있습니다.

nav {
  display: none;
  ...
}

JavaScript가 브라우저에서 작동하는 경우 HTML의 다음 스크립트는 navbar를 활성화합니다. 스크립트는 또한 "정보"섹션을 표시하고 "코드"및 "연락처"섹션을 숨겨 웹 사이트의 원하는 기본 모양을 제공합니다.

 <script>
    document.querySelector("nav").style.display = "flex";
    document.getElementById("about").style.display = "block";
    document.getElementById("code").style.display = "none";
    document.getElementById("contact").style.display = "none";
    ...
  </script>

이제 이벤트 리스너를 추가할 수 있습니다. "Hello"버튼(nav-about ID 포함)을 클릭하면 "정보"섹션이 표시되고 "코드"및 "연락처"섹션은 숨겨진 상태로 유지됩니다.

 <script>
    ...
    document.getElementById("nav-about").addEventListener("click", function () {
      document.getElementById("about").style.display = "block";
      document.getElementById("code").style.display = "none";
      document.getElementById("contact").style.display = "none";
    });
   ...
  </script>

"코드"버튼(id: nav-code )을 클릭하면 "코드"섹션이 표시되고 "정보"및 "연락처"섹션이 숨겨집니다.

 <script>
    ...
    document.getElementById("nav-code").addEventListener("click", function () {
      document.getElementById("about").style.display = "none";
      document.getElementById("code").style.display = "block";
      document.getElementById("contact").style.display = "none";
    });
    ...
  </script>

마지막으로 "연락처"버튼(id: nav-contact )을 클릭하면 "연락처"섹션이 나타나고 다른 두 섹션은 숨겨진 상태로 남아 있어야 합니다.

 <script>
    ...
    document.getElementById("nav-contact").addEventListener("click", function () {
      document.getElementById("about").style.display = "none";
      document.getElementById("code").style.display = "none";
      document.getElementById("contact").style.display = "block";
    });
  </script>

그리고 그게 다야! 이러한 이벤트 리스너가 있으면 이제 버튼이 작동합니다. 내 웹 사이트에 JavaScript를 다시 도입하면서 성능에 미치는 영향에 대해 우려했지만 Lighthouse 감사를 통해 두려움이 사라졌습니다.



관심이 있으시면 Github에서 내 웹 사이트의 source code을 사용할 수 있습니다.