자바스크립트 숨겨진 메뉴-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

자바스크립트 숨겨진 메뉴

王林

May 16, 2023 am 09:50 AM

JavaScript 숨겨진 메뉴

이 디지털 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 방법 중 하나가 되었습니다. 사용자 경험을 향상시키기 위해 웹사이트 디자인은 점점 더 상호작용성과 실용성에 중점을 두고 있습니다. 이러한 이유로 메뉴바 디자인 역시 웹사이트 디자인의 중요한 부분이 되었습니다. 그러나 때로는 메뉴바가 너무 번거롭고 페이지 공간을 많이 차지하여 사용자에게 불편과 압박감을 주는 경우도 있다. 따라서 히든 메뉴의 출현은 디자이너들이 이러한 문제를 해결하는 효과적인 방법 중 하나가 되었습니다.

숨겨진 메뉴는 사용자가 필요하지 않을 때 숨겨지고 필요할 때 확장될 수 있습니다. 이러한 방식으로 메뉴를 숨기면 페이지 공간이 절약될 뿐만 아니라 정보를 더 잘 분류할 수 있습니다. 따라서 점점 더 많은 웹사이트에 숨겨진 메뉴가 있습니다. 숨겨진 메뉴를 구현하는 방법에는 여러 가지가 있습니다. 이 기사에서는 JavaScript를 기반으로 숨겨진 메뉴를 구현하는 방법을 소개합니다.

1. HTML 구조

먼저 아래와 같이 페이지에 메뉴 표시줄을 정의해야 합니다.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

로그인 후 복사

이것은 홈, 블로그, 직장 및 연락처의 네 가지 옵션이 있는 간단한 메뉴 표시줄입니다. 이 메뉴 표시줄을 숨기려면 JavaScript를 사용하겠습니다.

2. CSS 스타일

메뉴를 숨기기 전에 먼저 CSS 스타일을 정의해야 합니다. 아래와 같이 메뉴 항목의 표시 속성을 숨길 수 있습니다.

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
}

nav ul li {
    margin:0 10px;
}

nav ul li a {
    color:#333;
    text-decoration:none;
}

.hidden-menu {
    display:none;
}

로그인 후 복사

이러한 CSS 스타일은 메뉴 항목의 스타일을 지정하고 메뉴를 숨기는 데 사용됩니다. 그 중 히든메뉴의 스타일은 메뉴를 숨기는 핵심인 display:none이다.

3. JavaScript 구현

이제 JavaScript를 통해 숨겨진 메뉴 구현을 시작할 수 있습니다. 메뉴바에 버튼을 추가해야 합니다. 사용자가 이 버튼을 클릭하면 메뉴바가 사라집니다. 버튼을 클릭한 후 JavaScript를 통해 메뉴 표시줄의 표시 상태를 전환합니다. 이 기능을 구현하려면 JavaScript의 addEventListener 메소드를 사용하여 버튼 클릭 이벤트를 수신해야 합니다.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button id="menu-button">Menu</button>
</nav>

로그인 후 복사

메뉴 바코드에 버튼 요소를 추가하고 해당 ID 속성을 "menu-button"으로 설정했습니다. 이제 JavaScript 코드 작성을 시작할 수 있습니다. 이 버튼 요소를 가져와서 버튼을 클릭할 때 메뉴 표시줄의 표시 상태를 전환해야 합니다. 다음 코드를 사용하여 이 단계를 수행할 수 있습니다.

const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");

button.addEventListener("click", () => {
    menu.classList.toggle("hidden-menu");
});

로그인 후 복사

이 JavaScript 코드는 버튼 요소와 메뉴 표시줄 요소를 가져오고 버튼을 클릭할 때 메뉴 표시줄의 상태를 전환하는 데 사용됩니다. 메뉴바를 숨기거나 표시하기 위해 메뉴바의 class 속성을 전환하기 위해 classList.toggle 메소드를 사용합니다.

4. CSS 스타일 조정

코드가 완성된 후에는 숨겨진 메뉴의 효과가 실제 요구에 더 부합하도록 CSS 스타일을 조정해야 합니다. 기본적으로 메뉴 모음의 초기 상태는 숨겨져 있어야 하며 사용자가 버튼을 클릭한 후에만 나타납니다. 따라서 메뉴 모음의 기본 상태를 조정해야 합니다. 아래와 같이 기본적으로 메뉴 표시줄을 숨겨진 상태로 설정하려면 메뉴 표시줄의 표시 속성을 없음으로 설정하기만 하면 됩니다.

nav ul {
    display:none;
    flex-direction:row;
    justify-content:flex-end;
}

.hidden-menu {
    display:flex;
}

로그인 후 복사

이렇게 하면 사용자가 웹 페이지를 로드할 때 메뉴 표시줄이 다음에 의해 숨겨집니다. 기본값은 사용자가 버튼을 클릭한 후에만 나타납니다.

5. 구현 효과

이제 JavaScript 숨김 메뉴 구현이 완료되었습니다. 다음으로 구현 효과를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript隐藏菜单</title>
    <style>
        nav ul {
            display:none;
            flex-direction:row;
            justify-content:flex-end;
            list-style:none;
            margin:0;
            padding:0;
        }

        nav ul li {
            margin:0 10px;
        }

        nav ul li a {
            color:#333;
            text-decoration:none;
        }

        .hidden-menu {
            display:flex;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button id="menu-button">Menu</button>
    </nav>
    
    <script>
        const button = document.getElementById("menu-button");
        const menu = document.querySelector("nav ul");
        
        button.addEventListener("click", () => {
            menu.classList.toggle("hidden-menu");
        });
    </script>
</body>
</html>

로그인 후 복사

이 예에서는 사용자가 웹 페이지를 로드할 때 메뉴 표시줄이 기본적으로 숨겨집니다. 메뉴 표시줄은 아래와 같이 사용자가 버튼을 클릭한 후에만 나타납니다.

자바스크립트 숨겨진 메뉴

버튼을 다시 클릭하면 메뉴 표시줄이 숨겨진 상태로 돌아갑니다.

6. 확장 적용

이 방법을 사용하면 간단한 숨겨진 메뉴 효과를 얻을 수 있습니다. 하지만 메뉴바에 옵션이 너무 많으면 숨겨진 메뉴가 우리의 요구를 완전히 충족시킬 수 없습니다. 이때 반응형 디자인을 사용하여 이 문제를 해결할 수 있습니다. 반응형 디자인을 통해 다양한 장치에 다양한 메뉴 표시줄을 표시할 수 있습니다. 예를 들어 휴대폰에서는 드롭다운 메뉴를 사용하여 모든 옵션을 표시할 수 있습니다. 이 방법은 다양한 장치의 요구 사항에 더 잘 적응하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 자바스크립트 숨겨진 메뉴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.