HTML, CSS 및 Javascript를 사용하는 반응형 Navbar

13402 단어 webdevcssjavascriptbeginners
우리가 구축하는 모든 CSS 프로젝트에 반응형 내비게이션 바는 필수입니다.

그래서 오늘은 HTML CSS와 바닐라 자바스크립트를 사용하여 반응형 내비게이션 바를 만들어 보겠습니다.

참고: 모바일 우선 설계입니다.

비디오를 선호하는 경우. 나는 또한 비디오를 만들었습니다. 여기에서 볼 수 있습니다.



시작합시다 🎉🎉

파트 1: 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 rel="stylesheet" href="styles.css" />
    <title>responsive navbar</title>
  </head>
  <body>
    <header>
      <nav class="nav">
        <a href="/" class="logo">logo</a>

        <div class="hamburger">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>

        <div class="nav__link hide">
          <a href="#">home</a>
          <a href="#">about</a>
          <a href="#">contact</a>
          <a href="#">blog</a>
        </div>
      </nav>
    </header>
  </body>

  <script src="./script.js"></script>
</html>


위에서 우리는 햄버거로 navbar의 마크업을 얻었습니다.

CSS와 javascript 파일도 연결했습니다.

CSS로 이 마크업의 스타일을 지정하는 방법을 살펴보겠습니다.

부분: CSS 2개




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}


여기에서 일부 기본 스타일을 제거하고 일부 스타일을 a 태그에 추가했습니다.

/* nav styles */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.logo {
  font-size: 1.8rem;
  color: rgb(5, 5, 116);
  padding-left: 20px;
}

.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: black;
}

.nav__link {
  position: fixed;
  width: 94%;
  top: 5rem;
  left: 18px;
  background-color: lightblue;
}

.nav__link a {
  display: block;
  text-align: center;
  padding: 10px 0;
}

.nav__link a:hover {
  background-color: lightcoral;
}

.hide {
  display: none;
}


메인 디자인입니다. 여기서 우리는 navbar에 햄버거와 로고의 스타일을 지정했습니다.

모바일 디자인이 완성되었습니다.



이제 데스크탑 디자인을 살펴보겠습니다.

@media screen and (min-width: 600px) {
  .nav__link {
    display: block;
    position: static;
    width: auto;
    margin-right: 20px;
    background: none;
  }

  .nav__link a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}


데스크톱 디자인에서는 절대 위치를 제거하고 디스플레이 블록으로 만들었습니다.
그리고 nav__link에 display inline-block을 추가하여 링크가 서로 옆에 있도록 했습니다.
마지막으로 .hamburger에 display none을 추가했습니다.



마지막으로 한 가지가 남았습니다. 이제 햄버거를 클릭 가능하게 만들어야 합니다.

파트 3: 자바스크립트




const hamburger = document.querySelector('.hamburger');
const navLink = document.querySelector('.nav__link');

hamburger.addEventListener('click', () => {
  navLink.classList.toggle('hide');
});


여기에서 햄버거에 클릭 이벤트를 추가하고 navLink에 classList.toggle을 추가했습니다.

classList.toggle이 하는 일은 주어진 클래스를 사용할 수 있으면 클래스를 제거하고 사용할 수 없으면 추가하는 것입니다.

소스 코드: https://github.com/Coderamrin/responsive-navbar-css-js

실시간 미리보기: https://coderamrin.github.io/responsive-navbar-css-js/

결론



읽어 주셔서 감사합니다.

마음에 드셨다면 팔로우 잊지마세요

또한 프로그래밍 튜토리얼과 비디오를 공유하는 YouTube 채널을 시작했습니다. 잘 들린다면 다음을 확인하십시오.

좋은 시간 되세요 :D
Rooton ZFS를 만들었는데 apt 오류가 발생했습니다.
스프링 부트를 사용한 GraphQL

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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