프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법

안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 html, css 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만듭니다.

햄버거 메뉴는 내비게이션의 표준 아이콘이 되었으며 오늘날 대부분의 주류 플랫폼과 앱에서도 사용할 정도로 인기를 얻었습니다. 햄버거 메뉴는 3개의 막대 라인이며 막대를 클릭하면 햄버거 메뉴로 나타나는 메뉴 열기 및 닫기 아이콘이 있습니다.

햄버거와 닮았 기 때문에 이런 식으로 명명되었습니다.

왜 햄버거 메뉴를 사용합니까?

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

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

햄버거 메뉴를 만드는 방법에는 여러 가지가 있습니다. 오늘 우리는 HTML, CSS 및 JavaScript의 도움으로 햄버거 메뉴를 만들 것입니다.
더 이상 할 일 없이 바로 들어가 보겠습니다.

1. 햄버거 메뉴에 대한 HTML 코드 작성:

<nav class="navbar">
<div class="title">CWR</div>
<div class="ham" >
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
<ul class="nav-sub">
<li class="list-item"><a href="#" class="nav-link">Home</a></li>
<li class="list-item"><a href="#" class="nav-link">Blogs</a></li>
<li class="list-item"><a href="#" class="nav-link">About me</a></li>
</ul>
</nav>

상단의 위 코드 스니펫에서 헤더의 모든 요소를 보유할 navbar 클래스로 <nav> 태그를 선언했습니다. 더 쉽게 이해할 수 있도록 헤더를 3부분으로 나눕니다.

제목 — 사이트 이름을 보유합니다.
홈- 햄버거 메뉴에 대한 구성이 포함됩니다.
Nav-sub- 내비게이션 링크가 있습니다.
오늘은 햄버거 메뉴를 만드는 방법에만 초점을 맞출 것입니다. HTML 부분에서는 div 요소(햄버거 메뉴 포함)와 3개의 span 요소(각각 햄버거 메뉴의 상징적인 선을 나타냄)만 정의하면 됩니다.

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

출력 코드 출력 만 : -

2. 햄버거 메뉴 CSS 코드:-

먼저 Title 및 NavBar에 대한 CSS 속성을 정의해 보겠습니다. 패딩과 여백은 범용 선택기를 사용하여 0으로 설정되고 글꼴 색상은 글꼴 색상 속성을 사용하여 검은색에서 흰색으로 변경됩니다. 이제 디스플레이는 클래스 선택기(.navbar)를 사용하여 "flex"로 설정되고 요소는 align items 속성을 사용하여 중앙에 배치됩니다.

*{
margin:0;
color:white;
}
.title{
cursor:pointer;
}
/*Properties for Nav-bar*/
.navbar{
display:flex;
top:0;
height:10vh;
justify-content:space-between;
align-items:center;
padding:0px 20px;
background:grey;
}

이제 탐색 모음 목록에 대해 논의해 보겠습니다. 콘텐츠는 selector.nav-sub 클래스를 사용하여 정렬되어 동일한 공간을 제공하며, 목록 항목에는 목록 항목의 색상을 상속하는 것 외에도 10px의 패딩이 제공됩니다.

.nav-sub{
display:flex;
justify-content:space-between;
}
.list-item {
padding:10px;
list-style:none;
}
.nav-link{
color:inherit;
text-decoration:none;
}

햄버거 메뉴의 기본 스타일은 이 간단한 CSS 코드로 만들 수 있습니다. 이제 media query 속성을 사용하여 navbar를 반응형으로 만듭니다. 탐색 모음의 위치는 "절대"로 설정되고 화면 크기가 768픽셀보다 작은 경우 flex direction 속성을 사용하여 방향은 "열"로 설정됩니다. 화면 크기가 그보다 크면 미디어 쿼리 선택기를 사용합니다.

@media only screen and (max-width:768px){
*{
overflow:hidden;
}
.nav-sub{
position:absolute;
top:10vh;
right:0px;
flex-direction:column;
background-color:rgb(0,0,0,0.75);
border-radius:0px 0px 0px 20px;
transition:transform 0.3s ease-in;
transform:translate(100%);
}
.nav-change{
transform:translate(0%);
}
.ham{
display:block;
}
.change .bar1 {
transform: rotate(45deg) translate(8px,3px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: rotate(-45deg) translate(8px,-3px);
}
}

이것은 햄버거 메뉴의 전체 CSS 코드입니다. HTML 및 CSS 코드 output.after 이 출력이 있는 출력이 있는 것을 볼 수 있습니다.

3. 햄버거 메뉴에 대한 JavaScript 코드 작성:-

햄버거 메뉴를 완성하고 모든 요소가 원하는 대로 작동하도록 하려면 자바스크립트 코드 작성을 추가
해 보겠습니다.

아래 코드에서 hamburger와 navsub라는 두 개의 바인딩을 만들었습니다.

햄버거 바인딩은 아이콘을 3 줄에서 X로 전환하는 데 사용되며 navsub는 아이콘을 클릭 할 때 탐색 모음이 나타나고 사라지는 데 사용됩니다.

const hamburger = document.querySelector(".ham");
const navsub = document.querySelector(".nav-sub");
hamburger.addEventListener('click', () => {
hamburger.classList.toggle("change")
navsub.classList.toggle("nav-change")
});

이 경우 HTML 구성 요소는 document.queryselector 속성을 사용하여 선택되고 addEventListener 속성을 사용하면 메뉴와 탐색 모음 사이를 전환하는 클릭 이벤트가 추가됩니다. 메뉴는 탐색 모음을 클릭하면 수정됩니다. toggle 기능을 사용하여 탐색 모음의 축소와 확장 사이를 전환할 수 있습니다.

이 전체 프로젝트가 어떻게 작동하는지 아래에서 테스트 할 수 있습니다.

햄버거 메뉴의 최종 출력:-

요약:

우리는 네비게이션 바와 함께 햄버거 메뉴를 성공적으로 만들었습니다. 해당 스팬 태그를 사용하는 대신 햄버거 메뉴를 적용하는 방법에는 여러 가지가 있지만. 궁금한 점이 있으면 댓글로 질문해 주세요.

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

각본: 옴 반디완

햄버거 메뉴란?

탐색 모음은 일반적으로 사용자에게 사용 편의성을 제공하는 웹 사이트 상단에 있는 섹션입니다. 사용자가 웹 사이트의 다른 섹션을 이동하는 데 도움이되는 여러 링크를 제공합니다.

탐색 모음의 주요 목적은 무엇입니까?

탐색 모음의 주요 목적은 웹 사이트 방문자가 더 쉽게 탐색할 수 있도록 하는 것입니다. 탐색 모음을 사용하면 사용자가 정보를 쉽게 얻을 수 있습니다. 탐색 모음을 통해 사용자는 웹 사이트 내부의 다른 섹션에 쉽게 액세스 할 수 있습니다.