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

javascript jQuery를 이용해서 햄버거버튼 메뉴 슬라이드형식으로 나오게 하기
메뉴 아이콘은 goggle icon사용

<div class="nav">
                <button id="open">
                    <span class="material-symbols-outlined">
                        menu
                    </span>
                </button>
                <div class="menu">
                    <button id="close">
                        <span class="material-symbols-outlined">
                            close
                        </span>
                    </button>
                    <a href="../html/01_Gallery_home.html">HOME</a>
                    <a href="../html/02_Gallery_about.html">ABOUT</a>
                    <a href="../html/03_Gallery_exhibition1.html">EXHIBITION</a>
                    <a href="../html/05_Gallery_education.html">EDUCATION</a>
                    <a href="../html/06_Gallery_Ticket_main.html">TICKET</a>
                    <a href="../html/08_Gallery_Mypage.html">MYPAGE</a>
                </div>
            </div>

✅html
1) nav안에 menu아이콘과 닫기 아이콘 메뉴를 작성

header .nav button {
    display: inline;
}
header .head .nav .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 100px 0;
    z-index: 10;
    flex-direction: column;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.5s;
}

header .head .nav .menu.on {
    transform: translateX(0);
}

header .head .nav .menu span {
    position: fixed;
    right: 0;
    top: 0;
}

✅css
1) menu에 transform x값과 부드러운 이동을 위해 transition을 설정한다
2) jquery함수를 통해 on과 off class를 추가할 예정이기 때문에 transform값을 설정해준다
3) 아이콘 버튼은 fixed로 고정해준다

$(function() {
    $("#open").click(function() {
        $(".menu").addClass("on");
    });
    $("#close").click(function() {
        $(".menu").removeClass("on");
    });
});

// id open을 클릭하면 menu on 추가
// id close를 클릭하면 menu on 삭제

✅jquery
1) #open id버튼 클릭시 .menu 에 class명 .on이 추가된다
-이전에 작성한 css의 효과가 추가(transform)
2) #close id버튼 클릭시 .menu 에 class명 .on이 추가된다
-이전에 작성한 css의 효과가 추가(transform)

 

https://rara-code.tistory.com/19?category=1072321

span이용하여 x자로 변하는 햄버거버튼만들기

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