HTML5、CSS3、およびjQueryを使用してドロップダウンNAVメニューを作成する方法-CSSチュートリアル-php.cn

HTML5、CSS3、およびjQueryを使用してドロップダウンNAVメニューを作成する方法

Christopher Nolan

リリース： 2025-03-04 09:46:17

オリジナル

861 人が閲覧しました

How to Create a Drop-Down Nav Menu With HTML5, CSS3, and JQuery

このチュートリアルでは、HTML5、CSS3、およびjQueryを使用したレスポンシブドロップダウンナビゲーションメニューの構築を示しています。 HTML構造、CSSスタイリング、およびjQuery機能をカバーして、スムーズでユーザーフレンドリーなエクスペリエンスを作成します。

プロジェクトのセットアップ：

、およびindex.html。style.css script.js

jqueryとfontをリンクすることから始めます： index.html

<!DOCTYPE html>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dropdown Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer">

ログイン後にコピー

ナビゲーションメニュー構造を作成します：index.html

（追加のナビゲーションリンクのために

 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;header-container&quot;&gt;
  &lt;div class=&quot;logo&quot;&gt;
    &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;LOGO&lt;/a&gt;
  &lt;/div&gt;
  &lt;nav&gt;
    &lt;ul class=&quot;menu&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;Nav Link 1&lt;/a&gt;
        &lt;i class=&quot;fas fa-arrow-down&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;submenu&quot;&gt;
          &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;Sub Nav Link 1&lt;/a&gt;
          &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;Sub Nav Link 2&lt;/a&gt;
          &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;Sub Nav Link 3&lt;/a&gt;
          &lt;a href=&quot;https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b&quot;&gt;Sub Nav Link 4&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;!-- Repeat for other Nav Links --&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/div&gt;

</pre><div class="contentsignin">ログイン後にコピー</div></div>

構造を繰り返します。）

<li>

CSSを使用してメニューをスタイルします。重要な側面には、最初にサブメナスを隠すことと、ホバーに表示することが含まれます。 style.css

.submenu {
  display: none;
  position: absolute;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  /* Add your styling here */
}

.nav-item:hover .submenu {
  display: block;
}

/* Add more styles as needed */

ログイン後にコピー

jQuery機能（）：

script.js

toggleClass

$('.nav-item').on('mouseover', function() {
  $(this).toggleClass('navActive');
});

ログイン後にコピー

HTMLは、サブメナスのネストされた要素を備えた基本的なナビゲーション構造を作成します。 CSSは最初にサブメナスを隠し、その後、親リスト項目がホバリングされているときにpseudoクラスを使用して表示します。 jQueryコード（オプション）は、スムーズな遷移やより高度な相互作用などの動的機能を追加します。

設計の好みと目的の機能に合わせて、CSSおよびjQueryコードを調整することを忘れないでください。これにより、カスタマイズ可能で応答性の高いドロップダウンナビゲーションメニューを作成するための基盤が提供されます。

以上がHTML5、CSS3、およびjQueryを使用してドロップダウンNAVメニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。