햄버거 메뉴를 만들자!(반응형)

7. 봉드로이드_개발공부

by 마켓플레이어, 마케터 봉 2024. 10. 27. 11:45

오늘 점심은 햄버거..!

라는 드립은 너무 아재같았나?

뭐 아무튼 햄버거 메뉴를 만들고자 한다.

header 영역(기존 아래와 같이 노출된 부분)을 특정 px 이하로 줄어들 경우(모바일/태블릿으로 볼 경우, 화면을 줄일경우 등) 햄버거 메뉴가 나오게 만들 것이다.

위 이미지의 스크립트는 다음과 같다.

<header class="header">
    <div class="container">
        <nav class="navbar">
            <div class="logo"> <a href="/">Bongdroid</a>
                <p>현재온도 : <span id="temp">00.0</span>도</p>
            </div>
            <ul class="nav-links">
                <li><a href="/" class="active">Home</a></li>
                <li><a href="about">About</a></li>
                <li><a href="skill">Skill</a></li>
                <li><a href="/#contactpoint">Contact</a></li>
            </ul>
        </nav>
    </div>
 </header>

이걸 아래와 같이 바꾸고 싶어 챗GPT와 함께 열심히 스크립트를 짰다.

실은 챗GPT가 뼈대를 잡아주고, 내가 원하는 정도로 조금 수정한 정도다.

[header.html] 파일 ▶︎ 상단 메뉴 (햄버거 메뉴 포함)

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>


    <link rel="stylesheet" type="text/css" href="/static/css/font.css">

    <style>
        body {
            /* font-family: 'Montserrat', sans-serif; */
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .headercontainer {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            background-color: #ffffff;
            padding: 20px 0;
            border-bottom: 1px solid #eaeaea;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .logo a {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            text-decoration: none;
        }

        .nav-links {
            list-style: none;
            display: flex;
            transition: max-height 0.3s ease-in-out;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 400;
        }

        .nav-links a.active {
            font-weight: 600;
            color: #007bff;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 4px 0;
        }

        @media (max-width: 500px) {
            .nav-links {
                position: absolute;
                top: 70px;
                right: 0;
                background-color: rgba(255, 255, 255, 0.8);
                flex-direction: column;
                width: 100%;
                max-height: 0;
                overflow: hidden;
                border-top: 1px solid #eaeaea;
                font-size: 1.1rem;
            }

            .nav-links.active {
                max-height: 300px;
            }

            .hamburger {
                display: flex;
            }
        }
    </style>


</head>

<body>
    <header class="header">
        <div class="headercontainer">
            <nav class="navbar">
                <div class="logo">
                    <a href="/">Bongdroid</a>
                    <p>현재온도 : <span id="temp">00.0</span>도</p>
                </div>
                <ul class="nav-links">
                    <li><a href="/" class="active">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/skill">Skill</a></li>
                    <li><a href="/#contactpoint">Contact</a></li>
                </ul>
                <div class="hamburger" id="hamburger">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </nav>
        </div>
    </header>

    <script>
        const hamburger = document.getElementById('hamburger');
        const navLinks = document.querySelector('.nav-links');

        hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
    </script>

</body>

</html>

1. 폰트는 내가 원하는 폰트를 넣기 위해, css 파일을 따로 만들어 뺐다. 이건 내 사이트의 전체 공통이기 때문에 위 스크립트에서는 주석처리를 했다. 혹시나 폰트 넣을 거면 주석 처리된 영역에 넣으면 된다.

2. 500px 이하로 디스플레이 크기가 작아지면, 아래 스크립트의 내용대로 꾸며진다.

3. 그리고 햄버거 메뉴를 클릭하면 작동하는 부분은 아래 스크립트다.

햄버거 메뉴를 클릭하면, 토글을 active하라는 내용이다.

그 외에 꾸미는 부분은 직접 조금씩 수정해가며 익혀가는 게 좋을 것이다.

'7. 봉드로이드_개발공부' 카테고리의 다른 글

회원 로그인 기능을 만들어보자! (쿠키값 생성 및 유지 - ft. JWT 토큰) (0)	2024.10.28
회원 가입 기능을 만들어보자! (해시 암호화/복호화) (3)	2024.10.27
블루프린트로 파이썬 파일을 관리중인데, html 파일이 안불러와진다면? (0)	2024.10.26
header와 footer 영역을 전체 공통으로 분리하여 사용하기(aka. 공통으로 노출되는 영역 만들기) (0)	2024.10.26
내가 만든 사이트에서 gpt를 API로 연결해 사용하기(streamlit편) (0)	2024.10.17