순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 메뉴 효과를 구현하는 단계

순수한 CSS를 사용하여 반응형 내비게이션 바의 드롭다운 메뉴 효과를 구현하는 단계

요즘 모바일 기기의 대중화로 인해 반응형 디자인은 웹 디자인에서 중요한 요소가 되었습니다. 웹 페이지의 탐색 모음 디자인에서 더 나은 사용자 경험을 제공하려면 일반적으로 드롭다운 메뉴를 사용하여 더 많은 탐색 옵션을 표시해야 합니다. 이 문서에서는 구체적인 코드 예제와 함께 순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 메뉴 효과를 구현하는 방법을 소개합니다.

<li>HTML 구조 만들기
먼저 탐색 모음 및 탐색 메뉴의 컨테이너를 포함한 기본 HTML 구조를 만들어야 합니다. 탐색 메뉴에서는 <ul></ul> 및 <li>를 사용하여 메뉴 항목을 생성하고, 드롭다운 메뉴에서는 <ul>을 사용합니다. </ul>는 <li>에 중첩되어 있습니다. <ul></ul>和<li>来创建菜单项，而下拉的菜单则使用一个<ul></ul>嵌套在一个<li>中。

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

<li>设置基本样式
接下来，我们需要为导航栏和菜单项设置一些基本的样式。我们可以使用flexbox来将菜单项水平排列，并使菜单项之间产生间隔。

.navbar {
  background-color: #f8f8f8;
  padding: 10px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

<li>定义点击下拉菜单的行为
通过CSS伪类:hover

.with-dropdown:hover .dropdown {
  display: block;
}

로그인 후 복사
기본 스타일 설정
다음으로 탐색 표시줄과 메뉴 항목에 대한 몇 가지 기본 스타일을 설정해야 합니다. flexbox를 사용하여 메뉴 항목을 수평으로 정렬하고 메뉴 항목 사이에 간격을 만들 수 있습니다. <li>


var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

로그인 후 복사
드롭다운 메뉴 클릭 동작 정의
CSS 의사 클래스 :hover를 통해 드롭다운 메뉴를 표시하는 효과를 얻을 수 있습니다. 메뉴 항목 위에 마우스를 올렸을 때. 모바일 장치에서는 JavaScript를 사용하여 드롭다운 메뉴의 표시 및 숨기기를 전환하는 클릭 이벤트를 추가할 수 있습니다.

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

로그인 후 복사

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

로그인 후 복사
🎜🎜반응형 디자인🎜다양한 화면 크기에 적응하려면 다양한 뷰포트 너비에서 탐색 모음의 레이아웃을 조정해야 합니다. 다음은 뷰포트 너비가 768px 미만인 모바일 장치용 스타일의 예입니다. 메뉴 항목을 숨기고 버튼을 사용하여 메뉴를 열거나 닫습니다. 🎜🎜rrreeerrreee🎜위 단계를 통해 순수 CSS 반응형 탐색 모음의 드롭다운 메뉴 효과를 성공적으로 구현했습니다. 화면 너비가 작은 경우 메뉴 항목은 자동으로 숨겨지며 버튼을 사용하여 메뉴를 열거나 닫을 수 있습니다. 드롭다운 메뉴가 있는 메뉴 항목 위로 마우스를 가져가면 드롭다운 메뉴가 자동으로 나타납니다. 이 구현은 간단하고 효율적이며 JavaScript에 의존하지 않으며 다양한 웹 프로젝트에 적합합니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 메뉴 효과를 구현하는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!