자바스크립트에서 왼쪽 보조 탐색을 구현하는 방법

웹 프론트 엔드 기술의 급속한 발전으로 JavaScript는 다양한 웹 애플리케이션에서 널리 사용되었습니다. 웹 디자인에 있어서 네비게이션 바는 사용자가 웹 사이트에 진입하는 주요 입구이자 웹 사이트의 전체 구조에서 중요한 부분입니다. 이 문서에서는 JavaScript 왼쪽 보조 탐색 모음을 구현하는 방법을 소개합니다.

내비게이션 바는 웹사이트의 가장 기본적인 구성 요소 중 하나이며 주로 전체 웹사이트의 다양한 페이지를 탐색하는 데 사용됩니다. 그러나 페이지에서 탐색 표시줄이 너무 길게 나타나는 경우가 종종 있습니다. 이 경우 일반적으로 이 문제를 해결하기 위해 보조 탐색 표시줄을 사용합니다. 이 기사에서는 JavaScript를 사용하여 왼쪽 보조 탐색 모음을 구현하는 방법을 소개하고 구현 원리를 간략하게 설명합니다.

왼쪽 보조 네비게이션 바를 구현하기 전에 먼저 몇 가지 필수 개념과 기술을 숙지해야 합니다. 여기에는 HTML, CSS 및 JavaScript가 포함됩니다.

1. HTML

HTML은 웹 콘텐츠를 설명하는 데 사용되는 마크업 언어입니다. HTML 태그는 텍스트, 그림, 링크 등을 포함하여 페이지의 다양한 요소를 정의하고 설명하는 데 사용됩니다. 왼쪽 보조 탐색 모음을 구현할 때 HTML을 사용하여 탐색 모음의 구조를 정의해야 합니다.

2. CSS

CSS는 웹 페이지의 스타일을 설명하는 데 사용되는 마크업 언어입니다. CSS 스타일 시트는 페이지의 다양한 요소의 모양과 레이아웃을 정의하고 설명하는 데 사용됩니다. 왼쪽 보조 탐색 모음을 구현할 때 CSS를 사용하여 탐색 모음의 스타일과 레이아웃을 정의해야 합니다.

3. JavaScript

JavaScript는 웹 애플리케이션을 개발하는 데 사용되는 프로그래밍 언어입니다. 구문과 의미는 C 언어와 유사합니다. 왼쪽 보조 탐색 모음을 구현할 때 탐색 모음의 상호 작용 및 동적 효과를 구현하려면 JavaScript를 사용해야 합니다.

이제 구현 단계를 시작하겠습니다.

1단계: HTML 구조

먼저 HTML을 사용하여 기본 탐색 모음과 보조 탐색 모음을 포함한 탐색 모음의 구조를 정의해야 합니다. 메인 네비게이션 바는 전체 웹사이트로 들어가는 입구이고, 보조 네비게이션 바는 메인 네비게이션 바의 하위 메뉴로, 메인 네비게이션 바의 일부 콘텐츠를 표시하는 데 사용됩니다. 다음은 왼쪽 보조 탐색 모음을 구현하는 데 사용되는 간단한 HTML 구조입니다.

<div class="sidebar">
   <ul class="main-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a>
         <ul class="sub-nav">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
         </ul>
      </li>
      <li><a href="#">Services</a>
         <ul class="sub-nav">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
         </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</div>

위 코드에서는 div 및 ul 요소를 사용하여 탐색 모음을 나타냅니다. 그 중 ul 요소는 기본 탐색 모음과 보조 탐색 모음의 두 부분으로 나뉩니다. 기본 탐색 모음은 li 및 태그로 표시되고, 보조 탐색 모음은 중첩된 ul, li 및 태그로 표시됩니다.

2단계: CSS 스타일

다음으로 CSS 스타일을 사용하여 탐색 모음의 스타일과 레이아웃을 정의해야 합니다. 스타일 시트는 <style> 태그에 있으며 탐색 모음의 스타일과 레이아웃을 정의하는 데 필요합니다. 구체적인 코드는 다음과 같습니다.

.sidebar {
   width: 250px;
   height: 100%;
   position: fixed;
   left: 0;
   top: 0;
   background-color: #333;
   color: #fff;
}

.main-nav {
   list-style: none;
   margin: 0;
   padding: 0;
}

.main-nav li {
   margin: 0;
   padding: 0;
}

.main-nav li a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: #fff;
}

.sub-nav {
   display: none;
   list-style: none;
   margin: 0;
   padding: 0;
}

.sub-nav li a {
   display: block;
   padding: 10px 20px;
   text-decoration: none;
   color: #fff;
   background-color: #444;
}

.main-nav li:hover .sub-nav {
   display: block;
}

위 코드에서는 네비게이션 바의 스타일과 위치를 제어하기 위해 .sidebar 클래스를 정의했습니다. 동시에 기본 탐색 모음과 보조 탐색 모음을 각각 나타내기 위해 main-nav와 sub-nav라는 ​​두 클래스를 사용합니다. 보조 탐색 모음을 숨기거나 표시할 수 있도록 하려면 display:none 속성을 사용하여 초기 상태를 숨김으로 설정합니다.

3단계: JavaScript 상호 작용

이제 JavaScript를 사용하여 탐색 모음 상호 작용을 구현해야 합니다. 구체적으로 구현해야 할 기능은 다음과 같습니다. 사용자가 기본 탐색 모음에 마우스를 올리면 보조 탐색 모음이 나타나고, 사용자가 기본 탐색 모음에서 마우스를 멀리 이동하면 보조 탐색 모음이 사라집니다. 다음은 구현 코드입니다.

var navItems = document.querySelectorAll(".sidebar li");

for(var i = 0; i < navItems.length; i++){
   navItems[i].addEventListener("mouseover", function(){
      var subNav = this.querySelector(".sub-nav");
      if(subNav){
         subNav.style.display = "block";
      }
   });

   navItems[i].addEventListener("mouseout", function(){
      var subNav = this.querySelector(".sub-nav");
      if(subNav){
         subNav.style.display = "none";
      }
   });
}

위 코드에서는 JavaScript를 사용하여 탐색 모음의 모든 li 요소를 가져오고 각 li 요소에 대해 두 개의 이벤트 리스너(mouseover 및 mouseout)를 추가합니다. 마우스가 기본 탐색 모음 위로 이동하면 JavaScript는 li 요소에 보조 탐색 모음이 있는지 여부(즉, .sub-nav 클래스가 포함되어 있는지 여부)를 자동으로 감지합니다. 그렇다면 해당 표시 속성이 block으로 설정됩니다. 마우스가 멀리 이동하면 JavaScript는 표시 속성을 없음으로 설정하여 숨깁니다.

요약하자면 이 글에서는 JavaScript를 사용하여 왼쪽 보조 탐색 모음을 구현하는 방법을 자세히 소개합니다. HTML, CSS, JavaScript의 조합을 통해 웹 탐색 및 기능 링크를 위한 간단하고 실용적인 탐색 표시줄을 구현할 수 있습니다. 이는 또한 JavaScript가 현대 웹 애플리케이션의 필수 기술 중 하나가 되었으며 더 널리 사용되고 홍보되어야 함을 보여줍니다.

위 내용은 자바스크립트에서 왼쪽 보조 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!