ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して応答性の高いナビゲーションバーのドロップダウンタブメニュー効果を実装する手順

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

WBOYオリジナル: 2023-10-28 09:58:491610ブラウズ

レスポンシブナビゲーションバーのドロップダウンタブメニュー効果を実装するための純粋な 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> タグに配置され、スタイルコントロールに <code>.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 サイトの他の関連記事を参照してください。

JavaScript css html

声明：

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

前の記事：CSS テキスト装飾プロパティの探索: text-decoration と text-transform次の記事：CSS テキスト装飾プロパティの探索: text-decoration と text-transform

続きを見る

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

関連記事

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