JS와 함께하는 쉬운 햄버거 메뉴 - 초보자

13430 단어 tutorialcodenewbiecssjavascript
햄버거 메뉴는 수많은 웹사이트에 있는 고전적인 UI 기능입니다. 특히 모바일 디자인에서 사용되는 클릭 시 메뉴를 표시하거나 숨기는 데 사용됩니다.

이 튜토리얼에서는 HTML, CSS 및 Javascript를 사용하여 햄버거 메뉴를 만드는 방법을 배웁니다.



HTML은 다음과 같습니다.

<head>
  <!-- Material Icon CDN -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <ul class="menu">
    <li><a class="menuItem" href="#">Home</a></li>
    <li><a class="menuItem" href="#">Profile</a></li>
    <li><a class="menuItem" href="#">About</a></li>
    <li><a class="menuItem" href="#">Contacts</a></li>
  </ul>
  <button class="hamburger">
    <!-- material icons https://material.io/resources/icons/ -->
    <i class="menuIcon material-icons">menu</i>
    <i class="closeIcon material-icons">close</i>
  </button>
</body>


클래스가 menu 인 기본 메뉴와 menuItem 클래스가 있는 메뉴 링크를 추가하여 시작합니다.

그런 다음 클래스가 hamburger인 버튼과 그 안에 메뉴와 닫기 아이콘이 모두 있는 버튼을 추가합니다. 나중에 CSS로 기본적으로 닫기 아이콘을 숨기고 Javascript로 표시할 아이콘을 대체합니다.

원하는 아이콘 패밀리를 사용할 수 있습니다. 헤드에 CDN을 로드하고 버튼 안에 메뉴와 닫기 아이콘을 추가하여 material icons을 사용했습니다.
menuIcon 및 closeIcon 클래스는 나중에 CSS 및 Javascript에서 아이콘을 참조하는 데 사용됩니다.

이제 CSS를 추가해 보겠습니다.

버튼position: fixed;에 추가하여 스크롤해도 영향을 받지 않도록 합니다. 그리고 z-index:100; 다른 모든 요소 위에 유지되도록 합니다.
top 및 right 값을 1rem로 추가하여 화면 오른쪽 상단에 배치합니다.

.hamburger {
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  padding: 4px;
  border: black solid 1px;
  background: white;
  cursor: pointer;
}


기본적으로 닫기 아이콘을 숨기려면 display: none; 클래스에 closeIcon를 추가합니다.

.closeIcon {
  display: none;
}


메뉴 클래스에서 스크롤할 수 없도록 position: fixed;를 추가합니다.
top , right , bottom 및 left 를 0으로 설정하면 메뉴가 전체 화면을 덮게 됩니다.

.menu {
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: black;
  color: white;
  list-style: none;
  padding-top: 4rem;
}


  • transform: translateY(-100%);는 기본적으로 화면 위에 메뉴를 숨기는 데 사용됩니다.
  • transition: transform 0.2s;는 옵션입니다. 슬라이드 위/아래 효과를 만들기 위해 변환 값의 변경을 애니메이션하는 데 사용됩니다.

    • translateY를 0으로 재설정하면 메뉴가 아래로 내려가 전체 화면을 덮게 됩니다.
    showMenu 클래스에 추가합니다.

    .showMenu {
  transform: translateY(0);
}


    이 클래스는 Javascript로 메뉴에 추가 및 제거되어 메뉴를 표시하거나 숨길 수 있습니다.

    다음은 메뉴 전환을 위한 Javascript입니다.

    const menu = document.querySelector(".menu");
const menuItems = document.querySelectorAll(".menuItem");
const hamburger= document.querySelector(".hamburger");
const closeIcon= document.querySelector(".closeIcon");
const menuIcon = document.querySelector(".menuIcon");

function toggleMenu() {
  if (menu.classList.contains("showMenu")) {
    menu.classList.remove("showMenu");
    closeIcon.style.display = "none";
    menuIcon.style.display = "block";
  } else {
    menu.classList.add("showMenu");
    closeIcon.style.display = "block";
    menuIcon.style.display = "none";
  }
}

hamburger.addEventListener("click", toggleMenu);


    햄버거 버튼을 클릭하면 toggleMenu()가 호출됩니다.

    메뉴에 클래스showMenu가 포함되어 있는지 확인합니다.

    메뉴에 showMenu 클래스가 포함된 경우 이를 제거하여 메뉴를 숨깁니다. 또한 display를 토글하여 닫기 아이콘을 숨기고 메뉴 아이콘을 표시합니다.

    메뉴에 showMenu 클래스가 없으면 추가하고 닫기 아이콘을 표시하고 메뉴 아이콘을 숨깁니다.

    가장 어려운 부분은 끝났습니다! 남은 것은 사용자가 링크를 클릭할 때 메뉴를 숨기는 것입니다.

    위의 Javascript에서 querySelectorAll 로 모든 메뉴 항목을 얻었습니다.

    const menuItems = document.querySelectorAll(".menuItem");

    forEach 를 사용하여 각 링크를 반복하고 toggleMenu() 에 대한 호출을 추가할 수 있습니다.
    toggleMenu()는 메뉴를 숨깁니다(사용자가 메뉴 항목을 클릭할 수 있으면 메뉴가 표시됨을 의미하기 때문입니다).

    menuItems.forEach( 
  function(menuItem) { 
    menuItem.addEventListener("click", toggleMenu);
  }
)


    그리고 그게 다야!





    읽어주셔서 감사합니다😄!!



    (2차 재작성 01/10/21)
    유용하고 행복한 코딩 👨‍💻을 찾으셨기를 바랍니다!
    [OpenXml] Generate excel in memory and dump to file
    POI 작업 excel 파일

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage