[JAVASCRIPT] 버튼을 클릭하면 나오는 사이드 메뉴 바

무근본 일반인 2023. 3. 31. 03:46

2023. 3. 31. 03:46

728x90

완성 화면

코드 보기 / HTML, JAVASCRIPT

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제 2</title>
  <link rel="stylesheet" href="ex2.css">
</head>
<body>
  <button id="bttn">&#9776;</button>

  <nav id="nav">
    <ul>
      <li class="active js"><a href="#">Javascript</a></li>
      <li class="active ts"><a href="#">Typescript</a></li>
      <li class="active node"><a href="#">Node.js</a></li>
    </ul>
  </nav>


  <script>
    let btn = document.querySelector("#bttn");
    let menu = document.querySelector("#nav")

    btn.addEventListener("click",()=>{
        btn.classList.add("active");
        nav.classList.add("active");
    });
    btn.addEventListener("mouseout",()=>{
        btn.classList.remove("active");
        nav.classList.remove("active");
    });

  </script>
</body>
</html>

HTML에는 버튼과 메뉴를 나타내는 요소가 정의되어 있으며, JAVASCRIPT에서는 버튼을 클릭할 때와 마우스가 버튼을 벗어날 때의 이벤트를 처리한다.

버튼 요소는 <button> 태그를 사용하여 정의되었다.이 버튼은 아이콘 모양을 나타내는 문자열 ☰을 포함하고 있다.이 버튼에는 bttn이라는 ID가 지정되어 있다.

메뉴는 <nav> 태그를 사용하여 정의되었다.이 메뉴는 세 개의 항목(li 태그)이 포함되어 있다.이 항목들은 각각 "Javascript", "Typescript", "Node.js"를 나타내며, 활성 항목은 "active" 클래스가 지정되어 있다.

JavaScript에서는 버튼 요소와 메뉴 요소를 선택하여 이벤트를 처리한다.먼저 querySelector를 사용하여 버튼 요소와 메뉴 요소를 선택한다.이후, addEventListener를 사용하여 버튼 클릭 이벤트와 마우스 벗어남 이벤트를 처리한다.

버튼 클릭 이벤트는 버튼을 클릭할 때마다 "active" 클래스를 버튼과 메뉴에 추가하여 메뉴를 나타내는 효과를 구현한다.마우스 벗어남 이벤트(mouseout)는 마우스가 버튼에서 벗어날 때 "active" 클래스를 버튼과 메뉴에서 제거하여 메뉴를 숨기는 효과를 구현한다.

코드 보기 / CSS

* {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0;
    min-height:100vh;
  }
  a {
    text-decoration: none;
  }
  #bttn {
    position:fixed;
    top:20px;
    right:20px;
    background-color:#639;
    padding:15px;
    border:none;
    outline: none;
    color:white;    
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
  }
  
  #bttn.active {
    transform:translateX(-110px);
  
  }
  #nav {
    position:fixed;
    top:0;
    right:0;
    background-color:#639;  
    height:100vh;
    padding:2em;
    transform:translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  
  #nav.active {
    transform:translateX(0);
  }
  
  #nav ul {  
    padding:0;
    margin:0;
    list-style: none;
  }
  
  #nav ul li {
    padding:1em 0;
  }
  
  #nav a {
    color:white;
    text-decoration: none;
  }

이 CSS 코드는 다음과 같은 스타일을 가진 HTML 요소를 가지고 있다.

1. 버튼(#bttn)을 클릭하면 나타나는 사이드 메뉴(#nav)가 있습니다.

2. #bttn은 화면 오른쪽 상단에 고정되어 있으며, 배경색과 글자색이 지정되어 있다.

3. #bttn이 클릭되면, #nav가 화면으로 나타나며, 배경색과 글자색이 지정되어 있다.

4. #nav는 오른쪽에서 화면 안으로 슬라이딩되며, 텍스트 링크가 포함된 목록을 가지고 있다.

5. 링크를 클릭하면 새로운 페이지로 이동한다. 그러나 아직 링크가 지정되어 있지 않다.

각 요소의 CSS 속성은 다음과 같다.

*

: 모든 요소에 대한 box-sizing은 border-box로 설정된다.

body

: body 요소는 flex로 설정되어, 세로 가운데 정렬이 이루어진다.

a

: a 요소의 텍스트에 대한 효과는 제거 된다.

#bttn

: ttn 요소는 position 속성으로 고정되며, 우측 상단에 위치하도록 설정된다.

클릭 시 transform 속성을 이용하여 좌측으로 이동하며, 배경색과 글자색이 변경된다.

#nav

: #nav 요소는 position 속성으로 고정되며, 오른쪽에서 화면으로 나타나도록 transform 속성을 이용한다.

배경색과 글자색이 지정된다.

#nav ul

: #nav ul은 패딩과 마진 속성, 그리고 리스트 스타일이 제거된다.

Fiat Lux