2-2 . CSS,JavaScript 간단한 메뉴 만들기 (How to make CSS Simple Menu)

이전 글 확인 하기

2. CSS로 간단한 메뉴 버튼 만들기 (Menu Button[CSS Hamburger Menu])

 

이전 글에 햄버거 메뉴 버튼을 만들었으니 이번엔 버튼을 클릭하면 메뉴 목록이 등장하도록 해보겠습니다.

 

 

RESULT

메뉴 버튼을 클릭하면 리스트가 나온다.

---

body

 

<div class="container" onclick="MenuIcon(this)">
        <nav class="container_nav">
            <ul>
                <li>Menu1</li>
                <li>Menu2</li>
                <li>Menu3</li>
            </ul>
        </nav>
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
        <p>클릭하면 메뉴 모양이 X로 변경됩니다.</p>
        <P>Click on the Menu Icon to transform it to "X"</P>
    </div>

 

CSS style

 

.container{
        cursor: pointer;
    }
    .bar1, .bar2, .bar3{
        width: 35px;
        height: 5px;
        background-color: #000;
        margin: 6px 0;
        transition: 0.4s;
    }
    .x_change .bar1{
        transform: rotate(-45deg) translate(-9px, 6px);
    }
    
    .x_change .bar2{
        opacity: 0;
    }
    .x_change .bar3{
        transform: rotate(45deg) translate(-8px, -8px);
    }

	/* ----------------- 아래부터 네비관련 부분 ----------------- */
    
    p{
        transition: 0.2s;	/* p태그에 애니메이션 효과 0.2초 설정 */
    }
    .p_hide p {
        opacity: 0;		/* 네비가 등장 할 때 사라지게 하기 위해서 투명도 0 설정*/
        transition: 0.2s;	
    }

    .container_nav{
        position: absolute;	/* 너비 높이 상하좌우 등 px이나 %를 설정할때 위치 제한이 없다  */
        background-color: aqua;		/* 네비 배경 색상 지정 */
        width: 200px;		/* 네비의 너비와 높이 지정 */
        height: 500px;
        transform: translate(-100%);	/*이동거리 -100%으로 설정함으로써 레이아웃 바깥쪽으로 이동시킴*/
        top: 0;	/* 위쪽 공백을 없애기 위해 0px로 지정 */
        left: 0;	/* 왼쪽 공백을 없애기 위헤 0px로 지정 */
        transition: 0.5s;  /* 네비가 사라질때 애니메이션 효과 0.5초 설정 */
    }

    .openNav .container_nav{
        position: absolute;
        background-color: aqua;
        width: 200px;
        height: 500px;
        transform: translate(0%); /* 이동거리 0으로 설정함으로써 원위치 시킴 */
        top: 0;
        left: 0;
        transition: 0.5s;	/* 네비가 등장할때 애니메이션 효과 0.5초 설정 */
    }

    ul{
        margin: 36px; /* 메뉴 목록 여백 설정 */
    }

 

JavaScript

 

    function MenuIcon(e){
        e.classList.toggle("x_change");
        e.classList.toggle("p_hide");
        e.classList.toggle("openNav");
    }

---

이 전 글에있던 코드와 비교하자면 div 컨테이너 클래스 안에 nav에 container_nav 클래스를 추가하여
메뉴를 만든 후 CSS에서 transform:translate()을 사용하여 네비를 숨기고 
메뉴 버튼을 클릭하면 등장하게 끔 하는 매우 간단한 메뉴를 만들었습니다.

자바 스크립트는 Element.classList.toggle 를 유지 하여 openNav로 지정하고 마찬가지로 껐다 켜서 반복 할 수 있게 설정 하였습니다.

물론 각각 함수 지정하여 document.querySelector 방법으로 'active'나 'on' 활성화하는 방법도 있습니다.

 

 

 

※ 복붙보다는 직접 코드를 작성해본다음 하나씩 지워서 어떤 차이가 있는지 직접 느껴봐야합니다※