반응형 nav bar 만들기 (addEventListener)

zhflsdl보보·2022년 10월 5일

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="nav.css">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/265c324bb8.js" crossorigin="anonymous"></script>
    <title>Make a navbar</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar_logo">
            <div>Kim Bo Yoon</div>
        </div>

        <ul class="navbar_menu">
            <li>Home</li>
            <li>About</li>
            <li>Goal</li>
            <li>Project</li>
        </ul>

        <div class="navbar_contact">
            <a href="mailto:kimboyoon0908@gmail.com"><i class="fa-regular fa-envelope"></i></a>
            <a href="https://github.com/kimboyoon" target="_blank"><i class="fa-brands fa-github"></i></a>
            <a href=""><i class="fa-brands fa-blogger-b"></i></a>
        </div>

        <a href="#" class="toggleBtn">
            <i class="fa-solid fa-bars"></i>
        </a>
        
    </nav>

    <script src="nav.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: bisque;
}

.navbar_logo {
    padding-left: 1em;
    font-family: 'Pacifico', cursive;
}

.navbar_menu {
    display: flex;
    padding: 0;
    list-style: none;
}

.navbar_menu li {
    padding: 8px 16px;
    font-family: 'Dancing Script', cursive;
}

.navbar_menu :hover {
    background-color: rgb(188, 185, 185);
    color: white;
    border-radius: 3px;
}

.navbar_contact {
    padding-right: 1em;
}

.navbar_contact a {
    padding: 8px 8px;
    color: black;
}

.toggleBtn {
    position: absolute;
    display: none;
    color: black;
    right: 20px;
    padding-top: 5px;
}

@media screen and (max-width:570px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 5px;
    }

    .navbar_menu {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .navbar_contact {
        display: none;
        justify-content: center;
        width: 100%
    }

    .toggleBtn {
        display:block;
    }

    .navbar_menu.activeBtn,
    .navbar_contact.activeBtn {
        display: flex;
        align-items: center;
    }
}

const toggleBtn = document.querySelector(".toggleBtn");
const menu = document.querySelector(".navbar_menu");
const contact = document.querySelector(".navbar_contact");

function click () {
    menu.classList.toggle("activeBtn");
    contact.classList.toggle("activeBtn");
}

toggleBtn.addEventListener("click",click);

JS event 중에 toggle은 해당 html에 "activeBtn" class 가 있으면 빼고, 없으면 추가하는 기능! => add, remove를 한번에 처리할 수 있다
HTML tag를 의미있는 tag로 사용하자. div 태그를 쓰기 보다는 바로 ul 이나 a를 쓰는 것이 더 좋다
addEventListener('click',click);
click했을 때 function click이 실행되는것
만약, click() 괄호를 넣으면 그냥 바로 실행되므로 괄호를 빼야함!
@media screen and (max-width:570px)
브라우저 화면 너비가 570px보다 작아졌을 때 실행되는 것

Q)
justify-content vs align-items

zhflsdl보보

매일매일 성장하는 개발자

이전 포스트

버그 찾기

다음 포스트

반응형 nav bar 만들기 (addEventListener)

버그 찾기

자바스크립트 타이핑 효과

0개의 댓글