html 및 css를 사용하는 반응형 navbar

5381 단어 htmlcssblogwebdev


햄버거 메뉴는 내비게이션의 표준 아이콘이 되었으며 오늘날 대부분의 주류 플랫폼과 앱에서도 인기를 얻고 있습니다.

모양이 햄버거를 닮았다고 하여 붙여진 이름입니다.

햄버거 메뉴를 사용하는 이유는 무엇입니까?

햄버거 메뉴는 콘텐츠를 탐색하거나 구성하여 웹사이트에 더 깔끔하고 깔끔한 방법을 제공합니다. 또한 디자이너들은 햄버거 메뉴를 너무 오랫동안 사용하여 그 자체가 표준이 되었습니다.

햄버거 메뉴를 만드는 방법:

햄버거 메뉴를 만드는 방법에는 여러 가지가 있습니다.
오늘 우리는 HTML, CSS 및 JavaScript의 도움으로 햄버거 메뉴를 만들 것입니다. 더 이상 고민하지 않고 바로 시작하겠습니다.

HTML

  <body>
    <nav>
      <div class="navbar">
        <div class="container nav-container">
            <input class="checkbox" type="checkbox" name="" id="" />
            <div class="hamburger-lines">
              <span class="line line1"></span>
              <span class="line line2"></span>
              <span class="line line3"></span>
            </div>  
          <div class="logo">
            <h1>Navbar</h1>
          </div>
          <div class="menu-items">
            <li><a href="#">Home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">blogs</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact</a></li>
          </div>
        </div>
      </div>
    </nav>
  </body>


햄버거 메뉴 javascript에 대한 모든 HTML 코드가 있습니다. 이제 CSS 없이 출력을 볼 수 있으며 햄버거 메뉴용 CSS를 작성합니다.

산출



CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

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

body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}


최종 출력 반응형 navbar



요약:
navbar와 함께 햄버거 메뉴를 성공적으로 만들었습니다. 해당 스팬 태그를 사용하는 대신 햄버거 메뉴를 적용하는 방법은 여러 가지가 있지만. 궁금하신 사항은 댓글로 문의주세요.

햄버거 메뉴에 대해 어떤 방식을 선호하는지 아래 댓글로 알려주세요.

작성자: codewithrandom

프로젝트 코드: @sanketbodke (코드펜)
별 등급을 렌더링하는 매우 간단한 방법
Tailwind CSS 예제를 사용한 반응형 Navbar 메뉴 반응

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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