w3.css

메뉴 아이콘

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 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {opacity: 0;}

/* Rotate last bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

3단계) ​​자바스크립트 추가

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

예시 설명

HTML 및 CSS: 이전과 동일한 스타일을 사용하지만 이번에는 각 <div> 요소 주위에 컨테이너 요소를 래핑하고 각각에 대해 클래스 이름을 지정한다.

컨테이너 요소는 사용자가 div(막대) 위로 마우스를 이동할 때 포인터 기호를 표시하는 데 사용된다.
클릭하면 새 클래스 이름을 추가하는 JavaScript 함수가 실행되어 각 가로 막대의 스타일이 변경된다.
첫 번째와 마지막 막대가 변형되어 문자 “x”로 회전된다.
가운데 막대가 희미해지며 보이지 않게 된다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기