햄버거 메뉴 버튼 만들기

1. 소스 

[HTML]

<button>
  <div class="btn1">햄버거버튼</div>
  <div class="btn2">햄버거버튼</div>
  <div class="btn3">햄버거버튼</div>
</button>

 

[CSS]

<style>
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
img {border: 0; outline: 0}
a {text-decoration: none; color:#333;}
button, fieldset, input{border: 0; outline: 0; background: none;}
button {cursor: pointer;}
table {border-collapse: collapse; border-spacing: 0}
caption, legend {font-size: 0; color:transparent; text-indent: -9999px; overflow: hidden;}
body,html{height: 100%;}

/*햄버거 메뉴버튼 디자인*/
button{width: 20px; height: 20px; position: relative; top: 100px; left:100px; -webkit-transition: .25s ease-in; transition: .25s ease-in;}
button > div{width: 100%; height: 2px; background: #000; font-size: 0; position: absolute; -webkit-transition: .25s ease-in; transition: .25s ease-in;}
.btn1{top: 0px;}
.btn2{top: 8px;}
.btn3{top: 16px;}

.btn1.action{-webkit-transform: rotate(45deg); transform: rotate(45deg); top: 8px; 
  background: #5800FF;}
.btn2.action{background-color: transparent;}
.btn3.action{-webkit-transform: rotate(135deg); transform: rotate(135deg); top: 8px; background: #5800FF;}
</style>

 

[JS]

<script>
$(document).ready(function(){
    $('button').click(function(){
        $('button > div').toggleClass('action');
    })
});     
</script>

 

2. 결과 화면 

햄버거 메뉴버튼

 

3. 제이쿼리 문법 정리 

• .toggleClass() : 선택한 요소에 클래스를 추가했다가 제거했다가 반복할 수 있다.