>source

그래서 튜토리얼에 따라 navbar를 만들고 모바일 버전을 만들려고 하지만 햄버거 드롭다운이 작동하지 않습니다. 이것을 알아내려고 몇 시간을 보냈지만 무엇이 잘못되었는지 찾을 수 없습니다

const navSlide= ()=> {
  const burger= document.querySelector(".burger");
  const nav= document.querySelector(".nav-links");
  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
  });
}
navSlide();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins', sans-serif;
  background-color: #5d4954;
  min-height: 8vh;
}
.logo {
  color: rgb(196, 194, 194);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}
.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  padding-right: 0px;
  font-weight: bold;
}
.nav-links li {
  list-style: none;
}
.nav-links a {
  color: rgb(196, 194, 194);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
}
.burger div {
  background-color: rgb(196, 194, 194);
  margin: 5px;
  width: 25px;
  height: 3px;
}
.burger {
  display: none;
  cursor: pointer;
}
@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5d4954;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}
.nav-active {
  transform: translateX(0%);
}
/*
@media  screen and(max-width:1024px){
   .nav-links{
        width: 60%;
        }
 }*/

<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">  <title>navbar</title>  <link rel="stylesheet" href="style.css">  <link rel="preconnect" href="https://fonts.googleapis.com">  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&amp;
display=swap" rel="stylesheet"></head><body>  <nav class="nav">    <div class="logo">      

my nav

</div> <ul class="nav-links"> <li class="el"><a href="#">Home</a></li> <li class="el"><a href="#">About</a></li> <li class="el"><a href="#">work</a></li> <li class="el"><a href="#">projects</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav></body></html>

JavaScript는 단어 하나하나 추적했기 때문에 괜찮아 보이지만 CSS가 내가 만든 미디어 쿼리에 문제가 있는 것 같아 걱정입니다. 미리 감사합니다 :)

실행 스니펫을 클릭하면 여기에서 잘 실행되지만 vscode에서 라이브 서버를 사용하는 크롬에서는 실행되지 않는다는 것을 깨달았습니다. 무엇이 문제인가요???

스니펫에서 버거 메뉴는 슬라이딩 아웃에서와 같이 작동합니다. "작동하지 않음"이 무엇을 의미하는지 더 구체적으로 말씀해 주시겠습니까?

disinfor2022-02-14 03:21:13

@disinfor 집, 정보, 직장 및 프로젝트처럼 버거 버튼을 클릭할 때 탐색 모음이 표시되기를 원합니다. 표시하려는 링크의 이름입니다.

Mame12022-02-14 03:21:13

이것이 귀하의 질문에 대한 답변입니까? jQuery 또는 getElementById와 같은 DOM 메서드가 요소를 찾지 못하는 이유는 무엇입니까?

disinfor2022-02-14 03:21:13
  • 이전 sql : 숫자 권한 수준으로 Oracle 데이터베이스 테이블 생성
  • 다음 python : 파이썬 문자열 목록 반복 문제