SIR
목록으로

pc에선 잘되는 자바스크립트가 모바일에선 안먹힙니다!ㅜㅜ

5
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 3,145
답변 1
목록

메뉴버튼을 누르면 사이드메뉴바가 나오는 동작을 하려합니다. 

pc에선 아주 잘 작동되는데 모바일에서 작동이 안됩니다...

고수분들 도와주세요!ㅜㅜ

Copy 
//html

                <nav>

                    <button class="pc-btn en">MENU</button>

                    <button class="m-burger">

                        <span></span>

                        <span></span>

                        <span></span>

                    </button>

                    <div class="gnb">  

                        <button class="close-btn en">CLOSE</button>

                        <ul class="en">

                            <li><a href="#insa" class="orange">INTRO</a></li>

                            <li><a href="#about_me" class="pink">ABOUT ME</a></li>

                            <li><a href="#portfolio" class="green">PORTFOLIO</a></li>

                            <li><a href="#footer" class="yellow">CONTACT</a></li>

                        </ul>

                    </div>

                </nav>

//script

const gnb = document.querySelector('.gnb'),

btn = document.querySelector('nav button'),

closeBtn = document.querySelector('.close-btn');

 

btn.addEventListener('click', openMenu);

closeBtn.addEventListener('click', closeMenu);

 

function openMenu() {

    gnb.style.left = '0px';

}

function closeMenu() {

    gnb.style.left = '-450px';

}
#그누보드5 #자바스크립트 #모바일메뉴 #코딩

답변 1개

<div id="gnb" class="gnb">  

Copy 
function openMenu() {
    document.getElementById("gnb").style.left = '0px';
}
function closeMenu() {
    document.getElementById("gnb").style.left = '-450px';
}

위와 같이 id=gnb 추가 하고 자스도 아래와 같이 변경하면 잘 되는것 같습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고