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

집

웹 프론트엔드

CSS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 28, 2023 am 09:58 AM

반응형 네비게이션 바 순수 CSS

순수 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7444

Cakephp 튜토리얼

1371

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

반응형 이미지 자동 캐러셀 효과를 구현하기 위해 CSS를 사용하는 방법에 대한 튜토리얼 Nov 21, 2023 am 08:37 AM

모바일 장치의 인기로 인해 웹 디자인에서는 좋은 사용자 경험을 달성하기 위해 장치 해상도 및 다양한 단말기의 화면 크기와 같은 요소를 고려해야 합니다. 웹 사이트의 반응형 디자인을 구현할 때 이미지 캐러셀 효과를 사용하여 제한된 시각적 창에 여러 이미지의 내용을 표시해야 하는 경우가 종종 있으며 동시에 웹 사이트의 시각적 효과도 향상시킬 수 있습니다. 이 문서에서는 CSS를 사용하여 반응형 이미지 자동 캐러셀 효과를 구현하는 방법을 소개하고 코드 예제와 분석을 제공합니다. 구현 아이디어 반응형 이미지 캐러셀 구현은 CSS flex 레이아웃을 통해 구현할 수 있습니다. 존재하다

Douyin 상단의 탐색 표시줄을 조정하는 방법은 무엇입니까? 기타 탐색 모음 조정 옵션 Mar 07, 2024 pm 02:50 PM

Douyin 인터페이스의 탐색 모음은 상단에 있으며 사용자가 다양한 기능과 콘텐츠에 빠르게 액세스할 수 있는 중요한 채널입니다. Douyin이 계속 업데이트됨에 따라 사용자는 개인 취향과 필요에 따라 탐색 모음을 사용자 정의하고 조정할 수 있기를 원할 수 있습니다. 1. Douyin 상단의 탐색 표시줄을 조정하는 방법은 무엇입니까? 일반적으로 Douyin의 상단 탐색 모음에는 일부 인기 채널이 표시되어 사용자가 관심 있는 콘텐츠를 빠르게 탐색하고 볼 수 있습니다. 상위 채널의 설정을 조정하려면 다음 단계를 따르세요. TikTok 앱을 열고 계정에 로그인하세요. 기본 인터페이스 위, 일반적으로 화면 중앙이나 상단에 있는 탐색 모음을 찾으세요. 채널 편집 인터페이스로 들어가려면 탐색 모음 위의 "+" 기호 또는 이와 유사한 버튼을 클릭하세요. 채널 편집 인터페이스에서는 인기 채널의 기본 목록을 볼 수 있습니다. 합격할 수 있어요

CSS를 사용하여 반응형 슬라이딩 메뉴 구현에 대한 튜토리얼 Nov 21, 2023 am 08:08 AM

CSS를 사용하여 반응형 슬라이딩 메뉴를 구현하는 방법에 대한 튜토리얼에는 특정 코드 예제가 필요합니다. 현대 웹 디자인에서는 반응형 디자인이 필수 기술이 되었습니다. 다양한 장치와 화면 크기를 수용하려면 웹사이트에 반응형 메뉴를 추가해야 합니다. 오늘은 CSS를 활용하여 반응형 슬라이딩 메뉴를 구현하고 구체적인 코드 예시를 제공하겠습니다. 먼저 구현을 살펴보겠습니다. 화면 너비가 특정 임계값보다 작을 때 자동으로 축소되고 메뉴 버튼을 클릭하면 확장되는 탐색 모음을 만들어 보겠습니다.

HTML, CSS, jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법 Oct 27, 2023 am 10:46 AM

HTML, CSS 및 jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법 태그 클라우드는 다양한 키워드나 태그를 표시하는 데 사용되는 일반적인 웹 요소입니다. 일반적으로 다양한 글꼴 크기나 색상으로 키워드의 중요성을 표시합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 태그 클라우드를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. HTML 구조 생성 먼저 HTML에서 태그 클라우드의 기본 구조를 생성해야 합니다. 순서가 지정되지 않은 목록을 사용하여 태그를 나타낼 수 있습니다.

HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법 Oct 20, 2023 pm 04:24 PM

HTML 및 CSS를 사용하여 반응형 회전판 레이아웃을 만드는 방법 회전판은 현대 웹 디자인의 일반적인 요소입니다. 사용자의 관심을 끌고, 여러 콘텐츠나 이미지를 표시하고, 자동으로 전환할 수 있습니다. 이 글에서는 HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법을 소개합니다. 먼저 기본 HTML 구조를 만들고 필요한 CSS 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다: <!DOCTYPEhtml&g

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법 Oct 26, 2023 pm 12:12 PM

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법 모바일 장치의 인기와 웹 사이트 액세스 경험에 대한 사용자 요구 사항이 증가함에 따라 반응형 스크롤 알림 표시줄을 디자인하는 것이 점점 더 중요해지고 있습니다. 반응형 디자인은 웹사이트가 다양한 기기에서 적절하게 표시되고 사용자가 알림 콘텐츠를 쉽게 볼 수 있도록 보장합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 HTM을 만들어야 합니다.

Layui를 사용하여 반응형 캘린더 기능을 구현하는 방법 Oct 25, 2023 pm 12:06 PM

Layui를 사용하여 반응형 캘린더 기능을 구현하는 방법 1. 소개 웹 개발에서 캘린더 기능은 일반적인 요구 사항 중 하나입니다. Layui는 달력 구성 요소를 포함하여 풍부한 UI 구성 요소를 제공하는 뛰어난 프런트 엔드 프레임워크입니다. 이 기사에서는 Layui를 사용하여 반응형 달력 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 2. HTML 구조 달력 기능을 구현하기 위해서는 먼저 적절한 HTML 구조를 만들어야 합니다. div 요소를 가장 바깥쪽 컨테이너로 사용한 다음 그 안에 사용할 수 있습니다.

HTML 및 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법 Oct 25, 2023 am 08:27 AM

HTML 및 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법 인터넷의 발전으로 인해 음악 플레이어는 사람들의 삶에 없어서는 안 될 부분이 되었습니다. HTML과 CSS는 훌륭한 음악 플레이어 페이지 레이아웃을 만드는 데 없어서는 안 될 도구입니다. 이 문서에서는 HTML과 CSS를 사용하여 반응형 음악 플레이어 페이지 레이아웃을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 페이지 구조 먼저 HTML 문서를 만들고 페이지의 기본 구조를 정의해야 합니다. 다음은 간략한 내용입니다

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제