-
햄버거 버튼 만들기! 웹 공부 ! 2018. 4. 18. 16:50
메뉴 부분을 보면 간혹 햄버거 버튼으로 되어 있는 홈페이지 들이 있다.
hmtl 코드
<button type="button" name="button" id="menu">
<span></span>
<span></span>
<span></span>
</button>
css 코드
*{margin: 0; padding: 0; overflow: hidden;}
button{background: transparent; border:none;}
#menu{position: absolute; width: 50px; right: 20px ;top: 20px}
#menu>span{display: block; width: 100%; height: 8px; background: #000; margin: 4px 0 ; border-radius: 10px; transition: all 0.5s;}
#menu>.on:nth-child(1) {transform: translateY(15px) rotate(225deg); transition-delay: 0.2s; }
#menu>.on:nth-child(2) {opacity: 0; transform: translateX(50px);}
#menu>.on:nth-child(3) {transform: translateY(-11px) rotate(-225deg); transition-delay: 0.2s; }
jquery
$(function() {
$('#menu').click(function() {
$('#menu>span').toggleClass('on')
})
})
'! 웹 공부 ! ' 카테고리의 다른 글
widnw (브라우저 창 ) 넓이알아오기 (0) 2018.05.01 스크롤에 따라서 움직이는 광고 베너 만들기 (0) 2018.04.23 bootstrap (0) 2018.04.05 지정된 html파일 에만 css 주는 방법 (0) 2018.04.03 고정 헤더에 맞게 html 앵커 오프셋 (0) 2018.03.29