레이아웃 헤더 부분의 기능 중 반응형 헤더와 햄버거 메뉴를 구현해 보았다.

 

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburgers</title>
    <link rel="stylesheet" href="dynamic.css">
    
</head>

<body>
    <header>
        <div id="logo">
            <h2>Hamburgers</h2>
        </div>
        <div class="head_article">
            <ul>
                <li>HOME</li>
                <li>OUR MENU</li>
                <li>Locate</li>
                <li>ABOUT</li>
            </ul>
        </div>
        <div id="head_side">
            <i>sns</i>
            <i>전화기</i>
        </div>
        <input type="checkbox" id="menuicon">
        <label for="menuicon" id="jsClickEvent">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </header>
    <script src="dynamic.js"></script>
</body>

</html>

 

 

 

 

CSS

:root {
    --headerColor: #0F6466;
    --pointColor: #D2E8E3;
    --mainColor: #D8B08C;
    --mainColor2: #FFCB9A;
    --cusorColor: #2C3532;
}

body,
html {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    color: var(--pointColor);
}

header {
    display: flex;
    width: 100%;
    background-color: var(--headerColor);
    border-bottom: 1px solid black;
    align-items: center;
    justify-content: space-around;
}

header>div>h2:hover,
li:hover {
    background-color: var(--cusorColor);
    border-radius: 4.5px;
}

.head_article>ul {
    display: flex;
}

#head_side {
    display: flex;
    align-items: center;
}

ul {
    display: block;
    list-style-type: none;
}

ul li {
    padding: 5px 25px;
}

input[id="menuicon"] {
    display: none;
}

input[id="menuicon"]+label {
    width: 50px;
    height: 40px;
    cursor: pointer;
    display: none;
}

input[id="menuicon"]+label span {
    display: block;
    width: 100%;
    height: 6px;
    background-color: #000;
    border-radius: 30px;
    position: relative;
}

label span:nth-child(2) {
    top: 3px;
}

label span:nth-child(3) {
    top: 7px;
}

@media(max-width:720px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .head_article {
        width: 100%;
        display: none;
        opacity: 0;
    }

    .head_article>ul {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    ul>li {
        width: 100%;
        text-align: center;
        border-radius: 4.5px;
    }

    input[id="menuicon"]+label {
        display: block;
        position: absolute;
        right: 20px;
        top: 15px;
    }

    span {
        transition: 0.3s;
    }

    input[id="menuicon"]:checked+label span:nth-child(1) {
        top: 10px;
        transform: rotate(45deg)
    }

    input[id="menuicon"]:checked+label span:nth-child(2) {
        transform: rotate(-45deg)
    }

    input[id="menuicon"]:checked+label span:nth-child(3) {
        opacity: 0;
    }


    .jsEventHamburger {
        display: block;
        opacity: 1;
    }
}

 

 

  CSS 반응형으로 max-width가 720px이면 다른 레이아웃을 사용자에게 보여준다.

 

 input[id="menuicon"]:checked+label span:nth-child(1) {
        top: 10px;
        transform: rotate(45deg)
    }

    input[id="menuicon"]:checked+label span:nth-child(2) {
        transform: rotate(-45deg)
    }

    input[id="menuicon"]:checked+label span:nth-child(3) {
        opacity: 0;
    }

 

  기본적으로 햄버거 메뉴는 input check박스가 체크될 때 햄버거 메뉴가 열리게 만들었다. 체크박스는 display none으로 가려준다. 가려준 체크박스는 사용자가 못 누르니 햄버거아이콘에 label을 붙여 for attribute를 사용한다.

 

  햄버거 아이콘 역시 직접 만든 것이다. span으로 만들었으며 클릭 시, transform을 이용해 햄버거 메뉴에서 닫는 메뉴로 애니메이션 효과를 준다.

 

 

 

 

 

JavaScript

const getMenu = document.querySelector('#jsClickEvent');
const getHeadArticle = document.querySelector('.head_article');
getMenu.addEventListener('click', () => {
    getHeadArticle.classList.toggle('jsEventHamburger');
});

 

 

 

  JS코드는 햄버거 메뉴가 클릭 시 일어나는 이벤트를 작성한 것이다. 

클릭되면 가려졌던 headArticle에 class를 한 개 더 추가한다. 추가 방식은 toggle이며,

 

PC 레이아웃

 

 

Max-width:750px 일때

 

 

 

 

 

 

https://www.flaticon.com/kr/free-icon/js_5968292

 

'Javascript' 카테고리의 다른 글

[JS] const,let  (0) 2024.08.08
[JS] JS 내장객체 Math  (3) 2024.07.14
[JS] D-day 실시간 계산  (0) 2024.07.07

티스토리툴바