[Javascript] 자바스크립트 토글 버튼 - 메뉴 버튼 구현

안녕하세요

 

오늘은 간단하게  자바스크립트로 토글버튼 구현 하는 방법 입니다

제가 사용할 방법은

메뉴 아이콘 이미지를 통하여 메뉴 버튼을 켜고 끄고 하는 방법을 알아보도록 하겠습니다

 

코드는 정말 간단하기 때문에, 긴 글이 아닌점 참고해주시면 감사하겠습니다

 

일단 아이콘을 미리 준비해주도록 합시다

 

cancel.png

0.01MB

menu.png

0.02MB

 

 

버튼을 바꾸는 방법부터 소개해드리겠습니다

우선, 미리보기로 모습을 보자면 !!

menu 버튼 gif

이런 모습이 됩니다.

저는 항상 transition 으로 약간 자연스럽게 변화를 좋아하는 타입이라..

 

이제 코드를 소개해드리도록 하겠습니다

 

 HTML 코드 

<div class="menu" onclick="sideMenu();"></div>

 

이렇게 그냥 div 하나와 함수 하나만 더 추가해주시면 됩니다

물론, 함수 이름은 여러분께서 정해주시면 됩니다. 꼭 따라하실 필요 없습니다 !!

 

 

 CSS 코드 

.menu {
  background: url(./menu.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  cursor: pointer;
  transition : 0.3s;
}

 

이미지와 파일이 같은 폴더안에 있다면 경로를 지정해주세요

그 후, width 와 height, position 으로 위치를 잡아주고 크기를 조정해 주세요

 

이제 대망의 Javascript 코드를 공개할 시간입니다

 

 Javascript 코드 

function sideMenu() {
    let menu = document.querySelector(".menu");
    menu.classList.toggle("active");
}

 

스크립트 코드를 보시면 menu 라는 변수를 선언해주고 HTML의 menu를 불러왔습니다

저는 클래스라서 .(dot)을 가져왔는데 혹시 id 값으로 하셨으면 #menu 이렇게 불러오셔도 됩니다

 

이렇게 설정해주셨으면 CSS에 한가지 더 추가해야할 사항이있습니다

 

 CSS 코드 

.menu {
  background: url(./menu.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: 10px;
  right: 30px;
}

.menu.active {
  background: url(./cancel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 999;
  top: 10px;
  right: 30px;
}

 

위 의 CSS 코드와 비교해보면 .active가 하나 더 붙은걸 보실 수 있습니다

 

여기서 잠깐!!

z-index : ?? 값을 꼭 추가해주세요

메뉴를 불러와도.. 아이콘이 보이지 않아 끌 수 없는 상황이 발생할 수 있습니다

 

이렇게 해주신 후 Live Server를 켜신 후 클릭해보세요

아마 0.3s 만에 변화하는 메뉴 버튼을 보실 수 있습니다

 

혹시 이게 되지 않는다!! 하시는 분들은

스크립트의 경로를 잘 확인해보시기 바랍니다

 

자, 그럼 이제 하나가 남았습니다

그럼 사이드 메뉴는 어떻게 구현하나요??

 

위 와 비슷한 방식으로 해주시면 됩니다

천천히 따라와주시기 바랍니다

 

 HTML 코드 

    <div class="side_menu" onclick="sideMenu();">
        <li><a href="">안녕하세요</a></li>
        <li><a href="">티스토리</a></li>
        <li><a href="">즐거운</a></li>
        <li><a href="">하루되세요</a></li>
    </div>

 

메뉴를 감싸고 있는 side_menu 박스 하나와 그 안에 리스트들을 추가해주세요

 

이번엔 스크립트를 먼저 해보도록 하겠습니다

 

 Javascript 코드 

  function sideMenu() {
    let side_menu = document.querySelector(".side_menu");
    side_menu.classList.toggle("active");
   }

 

 

이렇게 하시면 하나의 side_menu가 완성되었습니다

하지만 뭔가 이상합니다.

모양새가 영 눌러도 뭐 아무런 반응도 없고...

이제 CSS를 활용해서 바꿔주면 됩니다

 

 CSS 코드 

.side_menu {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  text-align: center;
}
.side_menu li {
  padding: 30px;
}
.side_menu a {
  color: black;
  font-size: 1.3em;
  font-weight: 700;
}
.side_menu.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

여기서 가장 중요한 부분이 display : none 이 부분이 아닐까 싶습니다

그냥 있을때는 숨겨 주신 후

active 되면 눈에 보이게 하는 것입니다

 

이렇게 해주시면 모든게 끝이 났습니다

 

예시를 한번 보자면

toggle btn 끝

 

이미지의 오른쪽 위를 봐주시면 메뉴버튼이 있습니다

디자인 보다는 구현하는 방법에 관하여 설명드리고 싶었기 때문에

모양말고 구현 방법만 봐주세요 ㅎㅎ

 

전체코드

 HTML 코드 

    <div class="menu" onclick="sideMenu();"></div>
    <div class="side_menu" onclick="sideMenu();">
        <li><a href="">안녕하세요</a></li>
        <li><a href="">티스토리</a></li>
        <li><a href="">즐거운</a></li>
        <li><a href="">하루되세요</a></li>
    </div>

 

 CSS 코드 

.menu {
  background: url(./menu.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: 10px;
  right: 30px;
}

.menu.active {
  background: url(./cancel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 999;
  top: 10px;
  right: 30px;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}

.side_menu {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  /* right: -100%; */
  display: none;
  text-align: center;
  background: lightgreen;
}
.side_menu li {
  padding: 30px;
}
.side_menu a {
  color: black;
  font-size: 1.3em;
  font-weight: 700;
}
.side_menu.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 Javscript 코드 

    function sideMenu() {
    let menu = document.querySelector(".menu");
    let side_menu = document.querySelector(".side_menu");
    menu.classList.toggle("active");
    side_menu.classList.toggle("active");
}

 

 

위 의 코드들은 분할 되어있기 때문에 묶어서 한번더 올려놓았습니다

 

자바스크립트 토글 버튼 구현하기 - 메뉴 버튼을 구현

포스팅 마치도록 하겠습니다

 

궁금하신 사항이나 더 좋은 방법이 있다면 댓글 꼭 남겨주세요 ㅎㅎ

읽어주셔서 감사합니다