[css/jquery] span을 이용하여 x자로 바뀌는 햄버거 버튼 만들기

<div class="nav">
                <a class="navButton" href="#">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <div class="menu">
                    <a href="#">메뉴1</a>
                    <a href="#">메뉴2</a>
                    <a href="#">메뉴3</a>
                    <a href="#">메뉴4</a>
                </div>
            </div>

✅html
1) nav 안에 navButton span으로 작성
2) 하단에 menu작성

.navButton.active-1 span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
    background: #2F2725;
}

.navButton.active-1 span:nth-of-type(2) {
    opacity: 0;
}

.navButton.active-1 span:nth-of-type(3) {
    transform: translateY(-13px) rotate(45deg);
    background: #2F2725;

}

header .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 40%;
    height: 100vh;
    padding: 100px 0;
    z-index: 10;
    flex-direction: column;
    background: #f7f7f7bb;
    transform: translateX(100%);
    transition: transform 0.5s;
    box-shadow: 6px 6px 9px 2px #342D44;
}

✅css
1) 각 span 색상과 y값 지정
2) menu에 transform값설정

$(function () {
    $(".navButton").click(function () {
        $(".menu").toggleClass("on");
    });
});

var menu = $(".navButton");
menu.each(function (index) {
    var $this = $(this);

    $this.on("click", function (e) {
        e.preventDefault();
        $(this).toggleClass("active-" + (index + 1));
    })
});

✅jquery
1) .navButton클릭시 menu에 .on class가 추가되면서 transform x값 변경
2) .navButton내에 span에 index번호 생성
3) .navButton 클릭시 toggle 되며 index 1이 활성화

 

https://rara-code.tistory.com/18?category=1072321
goggle아이콘으로 모바일 햄버거 버튼 만들기 참고하기

[jquery/css] 모바일 햄버거버튼 만들기

 

✔️ 구글링을 통해 작성
✔️ x자가 안맞는 경우 css 수정