본문 바로가기
WEB

[WEB] 반응형 nav바 만들기(HTML, CSS, JS)

by IT 정복가 2022. 8. 23.
728x90

1. 틀 잡아주기

<body>
    <nav class="nav-bar">
        <div class="nav-logo">

        </div>

        <ul class="nav-menu">

        </ul>

        <ul class="nav-sns">

        </ul>
    </nav>
    
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

클래스 명이 nav-bar인 태그 안에 logo와 메뉴, sns을 넣어주기 위해서 

각각을 div와 ul태그로 묶어 틀을 완성시켜준다.

2. 상세하게 UI 만들어주기

<body>
    <nav class="nav-bar">
        <div class="nav-logo">
            <i class="fa-solid fa-feather"></i>
            <a href="#">IT 정복가</a>
        </div>

        <ul class="nav-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Weddings</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>

        <ul class="nav-sns">
            <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
        </ul>
    </nav>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

.nav-logo에는 웹페이지의 로고와 웹 사이트 명을 작성해준다.

.nav-menu에는 메뉴를 보여준다.

.nav-sns에는 이 웹 페이지의 sns를 보여준다.

(아직까지 못생김)

3. CSS로 꾸며주기

body{
    margin: 0;
    padding: 0;
    
}

a{
    text-decoration: none;
    color: white;
}

a:hover{
    color: white;
}

li{
    list-style: none;
}

.nav-bar{
    display: flex;
    justify-content: space-between;
    background-color: #292a2d;
    align-items: center;
    padding: 0 30px;
    height: 60px;
}

.nav-logo i{
    font-size: 32px;
    color: white;
}

.nav-logo a{
    font-size: 28px;
    margin-left: 5px;
}

.nav-menu{
    display: flex;
    padding: 0;    
    margin: 0;
}

.nav-menu li{
    padding: 8px;
    margin-right: 30px;
}

.nav-menu li:hover{
    background-color: gray;
    border-radius: 4px;
}

.nav-sns{
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-sns li:nth-child(1){
    margin-right: 15px;
}

반응형으로 만들기

일정한 크기가 되면 아이템들이 아래로 떨어지고 burger 버튼을 눌러야지 메뉴가 나오게 해야한다.

그러기 위해서는 일단 burger 버튼을 만들어야 한다.

HTML의 .nav-bar 안에 burger 버튼의 코드를 작성한다.

<i class="fa-solid fa-bars"></i>

그 후 CSS로 특정 크기가 되아야지만 보여지게 하기 위해 

일반적인 상황에서는 보이지 않게 해야한다.

.nav-bar > i{
    color: white;
    position: absolute;
    right: 15px;
    font-size: 30px;
    top: 15px;
    display: none; /* 일반적인 상황에서는 보이지않게 하기 위해 */
}

@media로 반응형 만들어주기

@media screen and (max-width: 768px){
    .nav-bar{
        flex-direction: column;
        align-items: flex-start;
    }  

    .nav-menu{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .nav-menu li{
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .nav-sns{
        justify-content: center;
        width: 100%;
        padding: 0;
        margin-top: 10px;
    }
    .nav-bar > i{
        display: block;
    }

}

웹페이지의 크기가 768px보다 작아지면

위의 코드가 실행된다.

 

일반적인 상황

768px 보다 작아질 경우

*문제는 burger 버튼을 눌러야 메뉴가 나와야 되는데

버튼을 누르지 않아도 메뉴가 나온다는 것이다.

이것을 해결하기 위해 JS로 작업을 해주어야 한다.

JS로 마지막 작업 해주기

let toggleButton = document.querySelector(".fa-bars");
let navMenu = document.querySelector(".nav-menu");
let navSns = document.querySelector(".nav-sns");

toggleButton.addEventListener("click",()=>{
    navMenu.classList.toggle("active");
    navSns.classList.toggle("active");
});

CSS에 코드 추가하기(@media 안에 작성)

@media screen and (max-width: 768px){
    .nav-menu.active,
    .nav-sns.active{
        display: flex;
    }
}

결과

768px보다 클 경우

768px보다 작을 경우

burger 버튼을 클릭하면?

참고 영상

https://www.youtube.com/watch?v=X91jsJyZofw 

728x90
저작자표시

'WEB' 카테고리의 다른 글

[WEB] HTML/CSS/JS로 게임 만들기 2  (0) 2022.09.15
[WEB] HTML/CSS/JS로 게임 만들기 1  (0) 2022.09.13
CSS 단위 이해하기(%, px, em, rem, vw, vh의 차이)  (0) 2022.08.10
[HTML/CSS] HTML과 CSS로 tap 메뉴 만들어 보기(JS x)  (0) 2022.07.22
[HTML/CSS] 그리드를 이용하여 웹 페이지 틀 짜보기  (0) 2022.07.21

관련글

티스토리툴바