純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 28, 2023 am 09:58 AM

レスポンシブナビゲーションバー純粋なCSS

純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順

レスポンシブナビゲーションバーのドロップダウンタブメニュー効果を実装するための純粋な CSS 手順

ナビゲーションバーは Web ページの一般的な要素の 1 つであり、ドロップダウンタブメニューこれはナビゲーションバーでよく使用される効果であり、より多くのナビゲーションオプションを提供できます。この記事では、純粋な 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>

ログイン後にコピー

要約すると、上記の 4 つの手順を通じて、シンプルで純粋な CSS 応答性のナビゲーションバーのドロップダウンタブメニュー効果を実現できます。メディアクエリと JavaScript を使用すると、さまざまな画面サイズでコンテンツを表示および非表示にし、ユーザーにより良いエクスペリエンスを提供できます。

以上が純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7526

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CSS を使用してレスポンシブ画像の自動カルーセル効果を実装するためのチュートリアル Nov 21, 2023 am 08:37 AM

モバイルデバイスの普及に伴い、Web デザインでは、優れたユーザーエクスペリエンスを実現するために、デバイスの解像度やさまざまな端末の画面サイズなどの要素を考慮する必要があります。 Web サイトのレスポンシブデザインを実装する場合、画像カルーセル効果を使用して限られた視覚ウィンドウに複数の画像のコンテンツを表示することが必要になることがよくありますが、同時に Web サイトの視覚効果も高めることができます。この記事では、CSS を使用してレスポンシブ画像の自動カルーセル効果を実現する方法を紹介し、コード例と分析を示します。実装のアイデアレスポンシブ画像カルーセルの実装は、CSS フレックスレイアウトを通じて実装できます。存在する

Douyin の上部にあるナビゲーションバーを調整するにはどうすればよいですか?その他のナビゲーションバー調整オプション Mar 07, 2024 pm 02:50 PM

Douyin インターフェースのナビゲーションバーは上部にあり、ユーザーがさまざまな機能やコンテンツにすばやくアクセスするための重要なチャネルです。 Douyin は更新を続けるため、ユーザーは個人の好みやニーズに応じてナビゲーションバーをカスタマイズおよび調整できることを望む場合があります。 1.Douyin の上部にあるナビゲーションバーを調整するにはどうすればよいですか?通常、Douyin の上部のナビゲーションバーにはいくつかの人気チャンネルが表示され、ユーザーは興味のあるコンテンツをすばやく参照して表示できます。トップチャンネルの設定を調整したい場合は、次の手順に従ってください: TikTok アプリを開いてアカウントにログインします。メインインターフェイスの上、通常は画面の中央または上部にあるナビゲーションバーを見つけます。ナビゲーションバーの上にある「+」記号または同様のボタンをクリックして、チャネル編集インターフェイスに入ります。チャンネル編集インターフェイスでは、人気のあるチャンネルのデフォルトのリストを確認できます。合格できます

HTML、CSS、jQuery を使用してレスポンシブタグクラウドを作成する方法 Oct 27, 2023 am 10:46 AM

HTML、CSS、jQuery を使用してレスポンシブタグクラウドを作成する方法タグクラウドは、さまざまなキーワードやタグを表示するために使用される一般的な Web 要素です。通常、キーワードの重要性がさまざまなフォントサイズまたは色で表示されます。この記事では、HTML、CSS、jQueryを使ってレスポンシブタグクラウドを作成する方法と、具体的なコード例を紹介します。 HTML 構造の作成まず、HTML でタグクラウドの基本構造を作成する必要があります。順序なしリストを使用してタグを表すことができます

CSS を使用したレスポンシブなスライドメニューの実装に関するチュートリアル Nov 21, 2023 am 08:08 AM

CSS を使用してレスポンシブなスライドメニューを実装するチュートリアルには、特定のコードサンプルが必要です。現代の Web デザインでは、レスポンシブデザインは必須のスキルとなっています。さまざまなデバイスや画面サイズに対応するには、Web サイトに応答性の高いメニューを追加する必要があります。今日は、CSS を使用して応答性の高いスライドメニューを実装し、具体的なコード例を示します。まず、実装を見てみましょう。画面幅が一定のしきい値より小さい場合は自動的に折りたたまれ、メニューボタンをクリックすると展開するナビゲーションバーを作成します。

HTML と CSS を使用してレスポンシブなカルーセルレイアウトを作成する方法 Oct 20, 2023 pm 04:24 PM

HTML と CSS を使用してレスポンシブなカルーセルレイアウトを作成する方法カルーセルは、最新の Web デザインの一般的な要素です。ユーザーの注意を引いたり、複数のコンテンツや画像を表示したり、自動的に切り替えたりすることができます。この記事では、HTMLとCSSを使ってレスポンシブカルーセルレイアウトを作成する方法を紹介します。まず、基本的な HTML 構造を作成し、必要な CSS スタイルを追加する必要があります。以下は単純な HTML 構造です: <!DOCTYPEhtml&g

HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法 Oct 26, 2023 pm 12:12 PM

HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法モバイルデバイスの普及と、Web サイトへのアクセスエクスペリエンスに対するユーザーの要件の増加に伴い、応答性の高いスクロール通知バーの設計がますます重要になっています。レスポンシブデザインにより、Web サイトがさまざまなデバイスで適切に表示され、ユーザーが通知コンテンツを簡単に表示できるようになります。この記事では、HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法を紹介し、具体的なコード例を示します。まず、HTM を作成する必要があります

Layui を使用してレスポンシブなカレンダー機能を実装する方法 Oct 25, 2023 pm 12:06 PM

Layui を使用してレスポンシブなカレンダー機能を実装する方法 1. はじめに Web 開発において、カレンダー機能は一般的な要件の 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版

ホットトピック

純粋な 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版

ホットトピック

純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順