방법 - 메뉴 아이콘
CSS로 메뉴 아이콘을 만드는 방법을 알아보세요.
메뉴 아이콘을 만드는 방법
아이콘 라이브러리를 사용하지 않는 경우 CSS를 사용하여 기본 메뉴 아이콘을 만들 수 있습니다.
메뉴 아이콘:
애니메이션 메뉴 아이콘(클릭):
1단계) HTML 추가:
예시
<div></div>
<div></div>
<div></div>
2단계) CSS 추가:
예시
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
예시 설명
및 속성은 각 막대의 너비와 높이를 지정합니다 width
.height
검은색 을 추가 background-color
했으며 위쪽과 아래쪽 margin
을 사용하여 각 막대 사이에 약간의 거리를 만듭니다.
애니메이션 아이콘
클릭 시 메뉴 아이콘을 "취소/제거" 아이콘으로 변경하려면 CSS 및 JavaScript를 사용하십시오.
1단계) HTML 추가:
예시
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
2단계) CSS 추가:
예시
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
3단계) 자바스크립트 추가:
예시
function myFunction(x) {
x.classList.toggle("change");
}
예시 설명
HTML & CSS: 이전과 동일한 스타일을 사용합니다. 이번에는 각 <div> 요소 주위에 컨테이너 요소를 래핑하고 각각에 대한 클래스 이름을 지정합니다.
컨테이너 요소는 사용자가 div(막대) 위로 마우스를 이동할 때 포인터 기호를 표시하는 데 사용됩니다. 클릭하면 새 클래스 이름을 추가하는 JavaScript 기능이 실행되어 각 가로 막대의 스타일이 변경됩니다. 첫 번째 막대와 마지막 막대가 변형되어 문자 "x"로 회전됩니다. 중간에 있는 막대가 사라지고 보이지 않게 됩니다.