순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 탭 메뉴 효과를 구현하는 단계-CSS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2023-10-28 09:58:49

원래의

1715명이 탐색했습니다.

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

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

내비게이션 모음은 웹 페이지의 일반적인 요소 중 하나이며, 드롭다운 탭 메뉴는 웹 페이지에서 자주 사용되는 효과입니다. 탐색 모음은 더 많은 탐색 옵션을 제공할 수 있습니다. 이 문서에서는 순수 CSS를 사용하여 반응형 탐색 모음 드롭다운 탭 메뉴 효과를 구현하는 방법을 소개합니다.

1단계: 기본 HTML 구조 구축

먼저 데모용 기본 HTML 구조를 구축하고 탐색 모음에 몇 가지 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>响应式导航栏</title>
    <style>
      /* 导航栏样式 */
      .navbar {
        background-color: #333;
        overflow: hidden;
      }
      
      /* 导航栏选项样式 */
      .navbar a {
        float: left;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      
      /* 导航栏选项悬停样式 */
      .navbar a:hover {
        background-color: #ddd;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#">首页</a>
      <a href="#">新闻</a>
      <a href="#">图片</a>
      <a href="#">视频</a>
      <a href="#">论坛</a>
      <a href="#">联系我们</a>
      <a href="javascript:void(0);" class="icon" onclick="responsiveMenu()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </body>
</html>

로그인 후 복사

2단계: CSS 스타일 추가

다음으로 반응형 탐색 모음 효과를 얻으려면 CSS 스타일을 추가해야 합니다. 미디어 쿼리를 사용하여 다양한 화면 크기에 대한 스타일을 정의할 수 있습니다. 다음은 예제의 CSS 스타일입니다.

/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 导航栏选项隐藏样式 */
.navbar a:not(:first-child) {
  display: none;
}

/* 响应式导航栏样式 */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  
  /* 显示导航栏选项 */
  .navbar a.icon {
    float: right;
    display: block;
  }
  
  /* 导航栏选项悬停样式 */
  .navbar.responsive a.icon {
    background-color: #ddd;
    color: #333;
  }
  
  /* 导航栏选项悬停后的下拉菜单样式 */
  .navbar.responsive .navbar-dropdown {
    display: block;
  }
  
  /* 导航栏下拉菜单样式 */
  .navbar-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1;
  }
  
  /* 导航栏下拉菜单选项样式 */
  .navbar-dropdown a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* 导航栏下拉菜单选项悬停样式 */
  .navbar-dropdown a:hover {
    background-color: #f1f1f1;
  }
}

로그인 후 복사

3단계: JavaScript 코드 추가

반응형 탐색 모음의 효과를 구현하려면 JavaScript를 사용하여 메뉴 확장 및 축소도 제어해야 합니다. 다음은 간단한 JavaScript 코드 예입니다.

/* 响应式导航栏菜单展开与收起的函数 */
function responsiveMenu() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

로그인 후 복사

4단계: 드롭다운 메뉴 콘텐츠 추가

마지막으로 드롭다운 메뉴 콘텐츠를 탐색 모음에 추가해야 합니다. 콘텐츠의 이 부분은 스타일 제어를 위해 <div>标签中，并使用.navbar-dropdown 클래스에 배치됩니다. 예는 다음과 같습니다.

<div class="navbar-dropdown">
  <a href="#">音乐</a>
  <a href="#">游戏</a>
  <a href="#">电影</a>
  <a href="#">书籍</a>
</div>

로그인 후 복사

요약하면 위의 네 단계를 통해 간단하고 순수한 CSS 반응형 탐색 모음 드롭다운 탭 메뉴 효과를 얻을 수 있습니다. 미디어 쿼리와 JavaScript를 사용하면 다양한 화면 크기로 콘텐츠를 표시하고 숨길 수 있어 사용자에게 더 나은 경험을 제공할 수 있습니다.

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