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

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

탐색 모음은 웹 디자인의 일반적인 요소이며, 반응형 디자인을 사용하면 탐색 모음이 다양한 화면 크기와 환경에서도 잘 표시되도록 할 수 있습니다. 운영. 이 기사에서는 순수한 CSS를 사용하여 드롭다운 탭 효과가 있는 반응형 탐색 모음을 구현하는 방법을 소개합니다.

1단계: HTML 구조 준비
먼저 기본 HTML 구조를 준비해야 합니다. 탐색 모음은 일반적으로 순서가 지정되지 않은 목록(<ul></ul>)，每个导航项使用列表项(<li>)을 사용하여 래핑됩니다. 드롭다운 탭을 사용하려면 목록 항목 내에 중첩된 정렬되지 않은 목록을 추가해야 합니다.

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

2단계: 기본 스타일 설정
반응형 효과를 얻으려면 CSS 미디어 쿼리를 사용하여 다양한 화면 크기에서 탐색 모음의 표시 모드를 설정해야 합니다. 동시에 탐색 모음 및 드롭다운 탭의 기본 스타일도 설정해야 합니다.

.navbar {
  background-color: #333;
  height: 50px;
}

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

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  line-height: 50px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  width: 100%;
}

.dropdown li {
  width: 100%;
}

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

3단계: 반응형 스타일 설정
미디어 쿼리에서 다양한 화면 크기에 따라 탐색 모음의 표시 모드를 설정할 수 있습니다. 화면 너비가 작은 경우 가로 스크롤 막대를 사용하여 탐색 옵션을 표시할 수 있습니다. 화면 너비가 더 크면 드롭다운 탭을 사용하여 표시할 수 있습니다.

@media screen and (max-width: 768px) {
  .nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-list li {
    white-space: nowrap;
  }
  
  .nav-list li a {
    display: inline-block;
  }
  
  .dropdown {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .nav-list li:hover .dropdown {
    display: block;
  }
}

위의 세 단계를 통해 드롭다운 탭 효과를 갖춘 반응형 탐색 모음을 구현할 수 있습니다. 작은 화면에서는 탐색 옵션이 가로로 스크롤되는 반면, 큰 화면에서는 탐색 항목 위로 마우스를 가져가면 드롭다운 탭이 나타납니다.

이러한 내비게이션 바 디자인은 강력할 뿐만 아니라 좋은 사용자 경험을 제공하여 사용자가 다양한 기기에서 웹 페이지를 편리하게 검색하고 조작할 수 있도록 해줍니다. CSS 미디어 쿼리를 유연하게 사용하면 반응형 디자인에서 더 많은 요소의 동적 효과를 얻을 수 있습니다.

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