일반 JavaScript가 포함된 반응형 탐색 메뉴

42102 단어 html css webdev javascript

이 블로그 게시물의 소스 코드는 다음에서 찾을 수 있습니다.
https://github.com/linhtch90/devto-responsive-nav-plain-js.git
유리 진열장:
https://linhtch90.github.io/devto-responsive-nav-plain-js/

소개

반응형 탐색 메뉴를 만드는 것은 프론트엔드 개발자의 일반적인 작업입니다. 이 블로그 게시물의 목적은 작은 화면(600px 미만)에서 사라지고 햄버거 버튼으로 대체되는 탐색 메뉴를 구축하는 데 필요한 단계를 소개하는 것입니다.

주요 기능은 다음과 같습니다.

햄버거 버튼을 눌렀을 때 : 사이드 메뉴가 뜨고 햄버거 버튼이 닫기 버튼으로 바뀌었다.

닫기 버튼이나 메뉴 항목을 누르면 사이드 바가 접히고 햄버거 버튼이 다시 나타납니다.

1 단계

아래와 같이 데모용 html로 간단한 웹페이지를 만들어 ./index.html로 저장해 봅시다.

html 파일 ./css/style.css 및 ./js/hamburger.js 에 언급된 것과 유사한 이름과 경로를 가진 css 및 javascript 파일에 대한 폴더도 생성해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Styling -->
    <link rel="stylesheet" href="./css/style.css" />
    <!-- Google font: Open sans -->
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap"
      rel="stylesheet"
    />
    <!-- Fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />

    <title>
      Responsive navigation menu example
    </title>
  </head>
  <body>
    <div id="ham-button" class="hamburger-button" onclick="hamburgerMenu()">
      <i id="ham-icon" class="fas fa-bars"></i>
    </div>

    <div id="ham-menu" class="hamburger-menu">
      <ul>
        <li>
          <a href="#navigation"><div onclick="hamburgerMenu()">Home</div></a>
        </li>
        <li>
          <a href="#about"><div onclick="hamburgerMenu()">About</div></a>
        </li>
        <li>
          <a href="#projects"><div onclick="hamburgerMenu()">Projects</div></a>
        </li>
        <li>
          <a href="#blog"><div onclick="hamburgerMenu()">Blogs</div></a>
        </li>
        <li>
          <a href="#footer"><div onclick="hamburgerMenu()">Contact</div></a>
        </li>
      </ul>
    </div>
    <!-- Navigation bar -->
    <section id="navigation">
      <div class="container-dark">
        <nav class="navigation-bar">
          <ul>
            <li><a href="#navigation">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#blog">Blogs</a></li>
            <li><a href="#footer">Contact</a></li>
          </ul>
        </nav>
      </div>
    </section>
    <!-- Home -->
    <section id="home">
      <div class="container-dark">
        <div class="container-home">Home</div>
      </div>
    </section>
    <!-- About -->
    <section id="about">
      <div class="container-light">
        <div class="container-about">About</div>
      </div>
    </section>

    <!-- Projects -->
    <section id="projects">
      <div class="container-dark">
        <div class="container-projects">Projects</div>
      </div>
    </section>

    <!-- Skills -->
    <section id="skills">
      <div class="container-light">
        <div class="container-skills">Skills</div>
      </div>
    </section>

    <!-- Timeline -->
    <section id="timeline">
      <div class="container-dark">
        <div class="container-timeline">Timeline</div>
      </div>
    </section>

    <!-- Blog -->
    <section id="blog">
      <div class="container-light">
        <div class="container-blog">Blog</div>
      </div>
    </section>

    <!-- Footer -->
    <section id="footer">
      <footer>
        <div class="container-dark">
          <div class="container-footer">
            <div class="footer-icon-list">
              <i class="fab fa-twitter footer-icon"></i>
              <i class="fab fa-linkedin footer-icon"></i>
              <i class="fab fa-github footer-icon"></i>
              <i class="fab fa-dev footer-icon"></i>
              <i class="fab fa-instagram footer-icon"></i>
            </div>
          </div>
        </div>
      </footer>
    </section>

    <script type="text/javascript" src="./js/hamburger.js"></script>
  </body>
</html>

2 단계

./css/style.css에 CSS를 추가하여 html을 더 보기 좋고 책임감 있게 만들어 봅시다.

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0px;
  background-color: rgb(51, 44, 56);
  box-sizing: border-box;
  overflow-x: hidden;
}

h1 {
  padding: 0;
  margin: 0;
}

h2 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container-dark {
  display: flex;
  width: 100%;
  justify-content: center;
}

.container-light {
  display: flex;
  width: 100%;
  justify-content: center;
  background-color: whitesmoke;
}

/* Hamburger button */

.hamburger-button {
  display: none;
}

.hamburger-menu {
  display: none;
}

/* Navigation bar */

.navigation-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  height: 10vh;
}

.navigation-bar > ul {
  display: flex;
  width: 100%;
  list-style-type: none;
  justify-content: space-between;
  flex-direction: row;
  padding: 0;
}

.navigation-bar > ul > li {
  width: fit-content;
}

.navigation-bar > ul > li > a {
  text-decoration: none;
  color: whitesmoke;
  font-weight: 700;
  letter-spacing: 0.2rem;
}

.navigation-bar > ul > li > a:hover {
  color: green;
  transition: 0.75s;
  cursor: pointer;
}

/* Home section */

.container-home {
  display: flex;
  width: 75%;
  height: 90vh;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* About section */

.container-about {
  display: flex;
  width: 75%;
  height: 20rem;
  background-color: whitesmoke;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* Projects */

.container-projects {
  display: flex;
  width: 75%;
  height: 20rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* Skills */

.container-skills {
  display: flex;
  width: 75%;
  height: 20rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* Timeline */

.container-timeline {
  display: flex;
  width: 75%;
  height: 20rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* Blog */

.container-blog {
  display: flex;
  width: 75%;
  height: 20rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

/* Footer */

.container-footer {
  display: flex;
  width: 75%;
  height: 20rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: green;
}

.footer-icon-list {
  font-size: 1.5rem;
  color: whitesmoke;
  margin-top: 2rem;
  margin-bottom: 2rem;
  letter-spacing: 1rem;
}

.footer-icon:hover {
  color: green;
  cursor: pointer;
  transition: 0.75s;
}

/* Responsive  */

/* For mobile large */

@media only screen and (max-width: 600px) {
  .navigation-bar {
    visibility: hidden;
  }

  li a.icon {
    visibility: visible;
  }

  /* Home */

  .container-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 20rem;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
  }

  /* About section */

  .container-about {
    display: flex;
    height: auto;
    width: 75%;
    height: 20rem;
    background-color: whitesmoke;
  }

  /* Projects */

  .container-projects {
    width: 100%;
  }

  /* Skills */

  .container-skills {
    width: 100%;
  }

  /* Timeline */

  .container-timeline {
    width: 60%;
  }

  /* Blog */

  .container-blog {
    width: 100%;
  }

  /* Footer */

  .container-footer {
    width: 100%;
  }

  /* Hamburger button */
  .hamburger-button {
    display: block;
    font-size: 2rem;
    color: green;
    background-color: transparent;
    border: none;
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 30;
  }

  .hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: rgb(51, 44, 56);
  }

  .hamburger-menu > ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .hamburger-menu > ul > li {
    width: fit-content;
    margin: 1.5rem;
  }

  .hamburger-menu > ul > li > a {
    text-decoration: none;
    font-size: 2rem;
    color: whitesmoke;
    font-weight: 700;
    letter-spacing: 0.2rem;
  }

  .hamburger-menu > ul > li > a:hover {
    color: green;
    transition: 0.75s;
    cursor: pointer;
  }
}

3단계

./js/hamburger.js에 아래 코드를 추가합니다.

이것은 축소 가능한 메뉴 표시줄을 처리하고 햄버거 버튼과 닫기 버튼을 토글하는 코드입니다.

function hamburgerMenu() {
  // Toggle the side menu
  let hamburgerMenu = document.querySelector(".hamburger-menu");
  let menuStyle = getComputedStyle(hamburgerMenu);

  if (menuStyle.display == "none") {
    document.getElementById("ham-menu").style.display = "flex";
  } else {
    document.getElementById("ham-menu").style.display = "none";
  }

  // Exchange hamburger icon and close icon
  let hamburgerIcon = document.querySelector("#ham-icon");
  if (hamburgerIcon.classList.contains("fa-bars")) {
    hamburgerIcon.classList.replace("fa-bars", "fa-times-circle");
    return;
  } else {
    hamburgerIcon.classList.replace("fa-times-circle", "fa-bars");
    return;
  }
}

완료!

이제 웹 브라우저로 파일./index.html을 열고 방금 만든 반응형 탐색 메뉴를 검사할 수 있습니다.

즐거운 코딩!

Reference

이 문제에 관하여(일반 JavaScript가 포함된 반응형 탐색 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/linhtch90/responsive-navigation-menu-with-plain-javascript-1fn4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

nginx location 설정 소결

nginx 루트 명령

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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