만드는 방법: 메뉴 아이콘

CSS로 메뉴 아이콘을 생성하는 방법을 배우세요.

아이콘 라이브러리를 사용하지 않는 경우, CSS로 기본 메뉴 아이콘을 생성할 수 있습니다:

메뉴 아이콘:

직접 시도해 보세요

애니메이션 메뉴 아이콘(그를 클릭하세요):

직접 시도해 보세요

메뉴 아이콘을 어떻게 만드는가

첫 번째 단계 - HTML 추가:

<div></div>
<div></div>
<div></div>

두 번째 단계 - CSS 추가:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

직접 시도해 보세요

예제 설명:

width 및 height 각 라인의 너비와 높이를 지정하는 속성입니다.

각 라인 간의 간격을 만들기 위해 검은 배경 색상과 상하 외경을 추가했습니다.

아ニ메이션 아이콘

CSS와 JavaScript를 사용하여 클릭될 때 메뉴 아이콘을 '취소/삭제' 아이콘으로 변경합니다:

첫 번째 단계 - HTML 추가:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

두 번째 단계 - CSS 추가:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* 첫 번째 바를 회전 */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* 두 번째 바를 희미하게 만들 */
.change .bar2 {opacity: 0;}
/* 마지막 바를 회전 */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

세 번째 단계 - JavaScript 추가:

function myFunction(x) {
  x.classList.toggle("change");
}

직접 시도해 보세요

예제 설명:

HTML과 CSS: 이전과 동일한 스타일을 사용했지만, 이번에는 각 <div> 요소를 컨테이너 요소로 감싸고 각 요소에 클래스 이름을 지정했습니다.

컨테이너 요소는 사용자가 divs(라인)에 마우스를 올릴 때 포인터 시각을 표시하는 데 사용됩니다. 클릭될 때, 새로운 클래스 이름을 추가하는 JavaScript 함수를 실행합니다. 이는 각 수평 라인의 스타일을 변경합니다: 첫 번째와 마지막 라인은 'x' 문자로 변형되고 회전합니다. 중앙의 라인은 점진적으로 희미해지고 보이지 않게 됩니다.