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

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

모바일 기기가 대중화되면서 반응형 디자인이 점점 더 중요해지고 있으며 내비게이션 바는 디자인에서 매우 중요한 부분입니다. 웹사이트. 이 기사에서는 웹 사이트가 다양한 화면 크기에서 좋은 사용자 경험을 가질 수 있도록 순수한 CSS를 사용하여 반응형 탐색 모음에 드롭다운 하위 메뉴 효과를 구현하는 방법을 소개합니다.

1단계: HTML 구조
먼저 기본 HTML 구조를 구축해야 합니다. 탐색 모음은 일반적으로 순서가 지정되지 않은 목록 ul 및 목록 항목 li를 사용하여 생성됩니다.

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">产品</a>
      <ul class="sub-menu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">联系我们</a>
    </li>
  </ul>
</nav>

2단계: CSS 스타일
다음으로 CSS를 사용하여 탐색 모음의 배경색 설정, 글꼴 스타일, 하위 메뉴 표시 및 숨기기 등을 포함한 스타일을 추가해야 합니다.

.navbar {
  background-color: #333;
  height: 60px;
  padding: 0 20px;
}

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  width: 200px;
  padding: 0;
  margin: 0;
}

.nav-item:hover .sub-menu {
  display: block;
}

.sub-menu li {
  padding: 10px;
}

.sub-menu li a {
  color: #fff;
  text-decoration: none;
}

3단계: 반응형 디자인
다양한 화면 크기에 적응하려면 CSS 스타일에 몇 가지 미디어 쿼리를 추가해야 합니다. 다음은 한 가지 사례만 다루는 간단한 예입니다. 더 반응성이 뛰어난 스타일이 필요한 경우 특정 요구 사항에 따라 추가할 수 있습니다.

@media screen and (max-width: 768px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
  
  .nav-link {
    padding: 10px 0;
  }
  
  .sub-menu {
    position: static;
    display: block;
    background-color: transparent;
    width: 100%;
  }
  
  .sub-menu li {
    padding: 10px;
    border-top: 1px solid #fff;
  }
}

요약:
위 단계를 통해 간단한 반응형 탐색 모음 드롭다운 하위 메뉴 효과를 얻을 수 있습니다. 큰 화면에서는 하위 메뉴가 CSS 호버 상태를 통해 표시됩니다. 작은 화면에서는 하위 메뉴가 다양한 화면 크기에 맞게 추가된 몇 가지 추가 스타일과 함께 독립적인 블록 수준 요소로 표시됩니다.

이것은 단지 기본적인 예일 뿐이며 요구 사항을 충족하기 위해 실제 프로젝트에서는 더 많은 스타일과 기능이 필요할 수 있습니다. 하지만 이 예제를 통해 순수한 CSS를 사용하여 반응형 탐색 모음 드롭다운 하위 메뉴 효과를 구현하는 방법을 배울 수 있으며 특정 요구에 따라 확장하고 조정할 수 있습니다.

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