햄버거 메뉴의 디스플레이 효과 실현에 대한 튜토리얼 클릭

이 기사는 개발자가 햄버거 메뉴를 표시 할 수없는 문제를 해결하는 데 도움이됩니다. HTML 구조, CSS 스타일 및 JavaScript 코드를 분석함으로써, 우리는 햄버거 메뉴의 디스플레이를 올바르게 구현하고 햄버거 메뉴의 기능을 숨기는 방법을 자세히 설명하고 독자가 실제 프로젝트에 신속하게 마스터하고 적용 할 수 있도록 최적화 된 코드 예제를 제공합니다. 동시에 부트 스트랩 프레임 워크를 사용하여 반응 형 내비게이션 바를 신속하게 구축하도록 도입됩니다.

질문 이해 : 햄버거 메뉴의 로직 표시

버거 메뉴는 종종 소형 화면 장치에서 기존 내비게이션 막대를 교체하고 화면 공간을 절약하는 데 사용됩니다. 기본 원칙은 다음과 같습니다.

1. 내비게이션 막대 숨기기 : 작은 화면 아래에서 탐색 표시 줄은 기본적으로 숨겨져 있습니다.
2. 햄버거 아이콘 표시 : 햄버거 아이콘 (보통 3 개의 수평선)을 표시하십시오.
3. 클릭 이벤트 : 사용자가 햄버거 아이콘을 클릭하면 탐색 표시 줄이 표시됩니다.
4. 다시 클릭하십시오 : 햄버거 아이콘을 다시 클릭하면 탐색 표시 줄을 숨 깁니다.

기존 코드를 분석합니다

제공된 정보에 따르면 HTML 구조에는 네비게이션 바 Navbar와 햄버거 아이콘이 포함 된 이동 영역이 포함 된 헤더 영역이 포함되어 있습니다. CSS 스타일은 작은 화면에서 Navbar를 숨기고 이동 영역에 햄버거 아이콘을 표시하는 데 사용됩니다. JavaScript 코드는 햄버거 아이콘의 클릭 이벤트를 듣고 Navbar의 활성 클래스를 추가하거나 제거하여 디스플레이를 제어하고 탐색 표시 줄의 숨기기에 사용됩니다.

HTML 구조

 
    <a href="#"> <img id="icon-home" src="iconos/menu.jpg" alt=""> </a>
    <div>
        <ul id="navbar">
            <li> <a class="active" href="index.html"> home </a> </li>
            <li> <a href="shop.html"> Shop </a> </li>
            <li> <a href="blog.html"> blog </a> </li>
            <li> <a href="about.html"> 정보 </a> </li>
            <li> <a href="contact.html"> contact </a> </li>
            <li> <a href="cart.html"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewbox="0 16 16"> V4H-5V-.5A2.5 2.5 0 0 1 8 1ZM3.5 3V-.5A3.5 3.5 0 1 0-7 0V4H1V10A2 2 0 0 0 2 2H10A2 2 0 0 0 2-2V4H-3.5ZM2 5H12V9A1 1 0 1-1 1H3A1 1 0 0 1-1-1v5z "/> </svg> </i> </a> </li>
        </ul>
    </div>
    <div id="mobile">
        <a href="cart.html"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewbox="0 0 16 16"> V4H-5V-.5A2.5 2.5 0 1 8 1ZM3.5 3V-.5A3.5 3.5 0 1 0-7 0V4H1V10A2 2 0 0 0 2 2H10A2 2 0 0 0 2-2V4H-3.5ZM2 5H12V9A1 1 0 1-1 1H3A1 1 0 1-1-1V5Z "/> </svg> </i>>.
        <i id="bar" class="fas fa-outdent"> </i>
    </a>
</div>
섹션>

CSS 스타일

 #이동하는{
    디스플레이 : 없음;
    정렬 구조 : 센터;
}  
@Media (max-width : 799px) {
    #NAVBAR {
        디스플레이 : Flex;
        플렉스 방향 : 열;
        정렬 구조 : Flex-Start;
        정당화 컨텐츠 : Flex-Start;
        위치 : 고정;
        상단 : 0;
        오른쪽 : -300px;
        높이 : 100VH;
        너비 : 300px;
        배경색 : #fefefe;
        Box-Shadow : 0 40px 60px rgb (0, 0, 0, 0.1);
        패딩 : 80px 0 10;
    }

    #navbar.active {
        오른쪽 : 0px;
    }

    #Navbar li {
        마진 바닥 : 25px;
    }
    #이동하는{
        디스플레이 : Flex;
        정렬 구조 : 센터;
    }    
    #mobile i {
        색상 : #1A1A1A;
        글꼴 크기 : 24px;
        왼쪽 패딩 : 20px;

    }
}

자바 스크립트 코드

 const bar = document.getElementById ( 'bar');
const nav = document.getElementById ( 'navbar');

if (bar) {
    bar.addeventListener ( 'click', () => {
        nav.classlist.add ( 'active');
    })
};

문제 분석 및 솔루션

위 코드의 문제는 다음과 같습니다.

• 활성 클래스를 제거하기위한 논리 누락 : 햄버거 아이콘을 클릭하면 활성 클래스가 추가되므로 탐색 표시 줄이 나타나지 만 다시 클릭하면 숨길 수 없습니다.

해결책:

활성 클래스를 전환하기 위해 클릭하는 기능을 실현하려면 JavaScript 코드를 수정하십시오.

 const bar = document.getElementById ( 'bar');
const nav = document.getElementById ( 'navbar');

if (bar) {
    bar.addeventListener ( 'click', () => {
        nav.classlist.toggle ( 'Active');
    });
};

ClassList.toggle ( 'Active') 메소드를 사용하여 Navbar 요소의 활성 클래스를 추가하거나 제거하여 디스플레이와 숨겨진 사이의 전환을 달성 할 수 있습니다.

최적화 제안

1. 더 많은 의미 론적 클래스 이름을 사용하십시오 : 예를 들어, 코드 가독성을 향상시키기 위해 활성 대신 IS- 활성을 사용할 수 있습니다.

2. 전환 효과 추가 : CSS의 전환 속성을 통해 디스플레이에 전환 효과를 추가하고 탐색 표시 줄을 숨길 수있어 사용자 경험을 향상시킬 수 있습니다.

 #NAVBAR {
       / * ... 기존 스타일 ... */
       전환 : 오른쪽 0.3 초의 편안함; /* 전환 효과 추가*/
   }

3. 접근성 고려 : 키보드 내비게이션 및 스크린 리더에서 버거 메뉴가 잘 작동하는지 확인하십시오. 예를 들어, 기능을 설명하기 위해 햄버거 아이콘에 aria-label 속성을 추가하십시오.

 <i id="bar" class="fas fa-outdent" aria-label="Toggle Navigation"> </i>

부트 스트랩이있는 반응 형 탐색 막대를 빠르게 구현하십시오

Bootstrap은 반응 형 웹 페이지를 빠르게 구축 할 수있는 풍부한 구성 요소와 스타일을 제공하는 인기있는 프론트 엔드 프레임 워크입니다. 부트 스트랩을 사용하면 햄버거 메뉴의 구현을 단순화 할 수 있습니다.

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> Bootstrap Navbar </title>
    <link rel="스타일 시트" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



    <nav class="Navbar Navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"> navbar </a>
        <button class="navbar-toggler" type="button" data-toggle="붕괴" data-target="#navbarnav" aria-controls="navbarnav" aria-expanded="false" aria-label="Toggle Navigation">
            <span class="Navbar-Toggler-Icon"> </span>
        버튼>
        <div class="Collapse Navbar-Collapse" id="navbarnav">
            <ul class="Navbar-Nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#"> home <span class="sr-only"> (현재) </span> </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> 특징 </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> 가격 </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria disabled> disabled </a>
                </li>
            </ul>
        </div>
    </button></nav>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>

위 내용은 햄버거 메뉴의 디스플레이 효과 실현에 대한 튜토리얼 클릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!