無제

Vanilla Javascript_풀 스크린 오버레이 메뉴 본문

<script>

Vanilla Javascript_풀 스크린 오버레이 메뉴

yo-u-loo 2026. 6. 12. 18:37

 

Vanilla-JS-​nav-slide

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>풀 스크린 오버레이 메뉴 예제-https://youtu.be/hW67URqvWP4?list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js4.css">
    <script src="script.js"></script>
</head>

<body>
    <nav id="navs">
        <a href="#" id="closes">☓</a>
        <a href="#">May</a>
        <a href="#">June</a>
        <a href="#">July</a>
        <a href="#">August</a>
    </nav>

    <span id="opens">≡</span>

    <script>
        let openss = document.querySelector("#opens");

        openss.addEventListener("click", function () {
            document.querySelector("#opens").style.display = "none";
            document.querySelector("#navs").style.width = "100%";
        });

        let closess = document.querySelector("#closes");

        closess.addEventListener('click', function () {
            document.querySelector("#navs").style.width = "0%";
            document.querySelector("#opens").style.display = "block";
        });
    </script>

    <section>
        <header>
            <h1>Contrary to popular belief</h1>
        </header>
        <p><br></p>
        <p><br>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
            in
            some form, by injected humour, or randomised words which don't look even slightly believable. If you are
            going to
            use a
            passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
            All
            the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.</p>
        <p><br>
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
            Latin
            literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
            Hampden-Sydney
            College in
            Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going
            through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
            from
            sections 1.10.32
            and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
            This
            book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
            Ipsum,
            "Lorem ipsum
            dolor sit amet..", comes from a line in section 1.10.32.</p>
        <p><br></p>
        <p><br></p>

        <footer>
            <small>There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is
                pain...</small>
        </footer>
    </section>
</body>

</html>

 

@import url('https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

* {
    border: 0px solid slategray;
    padding: 0;
    margin: 0;
    outline: 0px solid gray;
}

body {
    font-family: 'Ropa Sans', sans-serif;
    color: white;
    font-size: 0.8rem;
    line-height: 2rem;
    width: 100%;
    height: 100vh;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background: url('https://images.unsplash.com/photo-1421986527537-888d998adb74?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80') no-repeat;
    background-size: cover;
    background-position: top center;
}

h1 {
    font-size: 2rem;
}

span {
    position: absolute;
    display: block;
    color: #fff;
    font-size: 3rem;
    float: left;
    top: 40px;
    left: 40px;
    cursor: pointer;
    opacity: 1;
    transition: 0.3s;
}

nav {
    position: absolute;
    top: 0;
    text-align: center;
    width: 0%;
    overflow-x: hidden;
    height: 100vh;
    z-index: 1;
    position: fixed;
    background: rgba(0, 0, 20, 0.8);
    transition: 0.3s;
}

nav a {
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    display: block;
    padding: 20px;
    transition: 0.3s;
    clear: both;
}

nav :first-child {
    float: left;
    line-height: 0.5rem;
    margin: 20px;
    cursor: pointer;
}

nav a:not(:first-child):hover {
    background: royalblue;
}

section {
    margin: 100px 10% 200px 10%;
}

 

이번 코드는 모바일 웹 앱(Web App)이나 반응형 웹사이트에서 자주 사용되는 풀스크린 내비게이션 메뉴(Full-screen Overlay Navigation) 기능입니다.

평소에는 햄버거 버튼(≡)만 깔끔하게 노출되다가, 해당 버튼을 클릭하면 메뉴가 화면 전체(100% 너비)로 시원하게 펼쳐지고, 닫기 버튼(✕)을 누르면 다시 너비가 0%로 줄어들며 자연스럽게 사라지는 인터랙션입니다.

이 기능은 포트폴리오에서 모바일 퍼스트 디자인을 구현하거나 UI 완성도를 높이고 싶을 때 반드시 한 번쯤 구현해봐야 하는 실무형 핵심 컴포넌트입니다.

특히 이 효과가 어색하지 않고 자연스럽게 느껴지려면, 단순히 자바스크립트만이 아니라 CSS의 역할이 매우 중요합니다. 메뉴가 갑자기 나타나는 것이 아니라, 사이드에서 부드럽게 슬라이드되거나 페이드인 되도록 애니메이션을 구성해야 완성도가 높아집니다.

 

 

[부드러운 오버레이 메뉴를 위한 필수 CSS 설정]

자바스크립트가 width: 0%와 width: 100%를 전환할 때 이를 부드러운 애니메이션으로 표현하려면, #navs 요소에 아래 CSS 속성들이 반드시 함께 적용되어야 합니다.

  1. position: fixed; (또는 absolute;)
    메뉴가 기존 웹 페이지 콘텐츠 위에 떠서 화면 전체를 덮도록 만들기 위한 필수 속성입니다.
    보통 top: 0;, left: 0;, height: 100vh;와 함께 사용되어 전체 화면을 기준으로 배치됩니다.

  2. width: 0%; (초기 상태 설정)
    페이지가 처음 로드될 때 메뉴는 기본적으로 닫혀 있어야 하므로, 가로 폭을 0%로 설정하여 완전히 숨겨진 상태로 시작합니다.

  3. overflow: hidden; (필수 안전 장치)  ★매우 중요
    가장 중요한 속성 중 하나로, 이 설정이 없으면 width: 0% 상태에서도 내부 콘텐츠(예: 메뉴 텍스트)가 화면 밖으로 삐져나오는 문제가 발생할 수 있습니다.
    이를 방지하기 위해 자식 요소를 강제로 숨겨주는 역할을 합니다.

  4. transition: 0.5s; (애니메이션 엔진) ★핵심
    너비가 0%에서 100%로 변경되는 과정을 0.5초 동안 자연스럽게 이어지도록 만들어주는 속성입니다.
    이 설정이 있어야 부드러운 슬라이딩 오버레이 효과가 완성됩니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_스마트 스크롤 내비게이션  (0) 2026.06.15
Vanilla Javascript_사이드바 토글 메뉴  (0) 2026.06.12
Vanilla Javascript_이미지 갤러리 전환  (0) 2026.06.12
Vanilla Javascript_타이핑 효과 예제  (0) 2026.06.12
Vanilla Javascript_하단 슬라이드 모달  (0) 2026.06.12
'<script>' Related Articles more