[38JS] #5 사이드바 만들기

38가지 자바스크립트&리액트 튜토리얼

★최종 결과물

• Home
• Product
• About
• Contact

• Home
• Product
• About
• Contact

 

 

 

---

 

1. HTML

저번 포스트에서 만들었던 반응형 네비게이션이 사이드바 형태여서,

이번엔 그냥 사이드바 DOM을 열었다 접었다 하는 간단한 사이드바 라이브러리 형식으로 만들어보려고 한다.

js 셀렉터로 이용하는 class명과 css를 위한 class명은 분리하는게 좋을것 같아

side_bar, js-side_bar 로 나누었다.

또, 이번엔 객체 내부에서 버튼을 지정하지 않고 각 버튼에 직접 onclick 속성을 사용해보기로 했다.

<div class="inner_body">
    <button onclick="sidebar.open()">SideBar Open</button>
    <aside class="side_bar js-side_bar">
        <ul>
            <li>
            <li><a href="#none">Home</a></li>
            <li><a href="#none">Product</a></li>
            <li><a href="#none">About</a></li>
            <li><a href="#none">Contact</a></li>
        </ul>
        <button onclick="sidebar.close()">SideBar Close</button>
    </aside>
</div>

 

 

2. CSS

사이드바는 사실 JS보단 CSS가 중요하다.

가능하면 JS 에서 config로 right, left 방향을 지정할 수 있으면 좋을듯.

.inner_body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #222;
    font-family: 'Poppins', sans-serif;
}


.side_bar {
    position: fixed;
    top: 0;
    width: 250px;
    height: 100%;
    background: #111;
    transition: all 0.3s ease;
}

.inner_body button {
    display: inline-block;
    border: 1px solid #eee;
    color: #eee;
    background-color: transparent;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 5px;
}

.side_bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.side_bar ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

.side_bar ul li {
    width: 100%;
    padding: 10px 10%;
}

.side_bar ul li a {
    color: #eee;
    text-decoration: none;
}

 

3. JS

이전 포스트에서 계속 target을 css셀렉터 형식으로 받았는데,

이번에는 target이 문자열이면 선택하여 DOM을 지정하고,

문자열이 아니면 target을 그냥 쓰도록 설정해보았다.

( 직접 DOM을 넣을 경우를 대비 )

class SideBar {
    constructor(target, direction) {
        if(typeof target === 'string'){
            this.target = document.querySelector(target);
        }else{
            this.target = target;
        }

        this.direction = direction;
        this.opend = false;
        this.width = this.target.offsetWidth;
        this.init();
    }

    init() {
        this.target.style[this.direction] = `-${this.width}px`;
    }

    open() {
        if(this.opend){
            this.close();
            return;
        }
        this.opend = true;
        this.target.style[this.direction] = `0`;
    }

    close() {
        this.target.style[this.direction] = `-${this.width}px`;
        this.opend = false;
    }
}

init()

초기에 side바의 위치를 받아 왼쪽, 혹은 오른쪽으로 자신의 너비만큼 이동 시켜주는 초기화 매서드
1. this.direction은 'left', 'right'의 문자열이므로 this.target.style[this.direction]을 이용하면 if문을 안써도 된다.
2. sidebar가 숨겨진 상태에서 넘치는걸 방지하기 위해 부모 DOM에 overflow: hidden 속성을 주어야한다.

open(), close()

사이드바를 열고 닫는 역할을 하는 매서드
1. init과 동일하게 this.target.style[this.direction]을 이용하며,
open의 경우 this.opend가 true인 경우 close(); 매서드를 실행 후 리턴한다.
2. close는 다시 닫아 준 뒤, this.opend 변수를 false로 만들어준다.