CSS와 메뉴 아이콘을 만드는 방법에 대해 알아보십시오.
Menu (메뉴) 아이콘을 만드는 방법
당신이 아이콘 라이브러리를 사용하지 않는 경우, 당신은 CSS와 기본 메뉴 아이콘을 만들 수 있습니다 :
메뉴 아이콘 :
애니메이션 메뉴 아이콘 (click on it) :
1 단계) HTML을 추가합니다 :
예
<div></div>
<div></div>
<div></div>2 단계) CSS를 추가 :
예 설명
width 와 height 속성은 각각의 바의 폭 및 높이를 지정한다.
우리는 검은 추가 한 background-color , 상단과 하단 margin 각 막대 사이에 약간의 거리를 만드는 데 사용됩니다.
애니메이션 아이콘
A를 메뉴 아이콘을 변경하기 위해 CSS와 자바 스크립트를 사용하여 "cancel/remove" 가 클릭하면 아이콘 :
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 단계) 자바 스크립트를 추가합니다
예 설명
HTML 및 CSS : 우리는 이전에만이 시간을 동일한 스타일을 사용하여, 우리는 서로의 주위에 컨테이너 요소 포장 <div> 요소를 우리는 각각의 클래스 이름을 지정합니다.
컨테이너 요소는 사용자 div의 마우스를 움직일 때 포인터 기호를 표시하기 위해 사용된다 (bars) . 이를 클릭하면, 각 수평 막대의 스타일을 변경됩니다 그것에 새로운 클래스 이름을 추가하는 자바 스크립트 함수를 실행합니다 : 첫 번째와 마지막 줄이 변환되어 문자로 회전 "x" . 중간 바는 페이드 아웃 보이지 않는됩니다.