HTML、CSS、jQuery を使用して応答性の高い垂直ナビゲーションを作成する方法

HTML、CSS、jQuery を使用して応答性の高い垂直ナビゲーションを作成する方法

ナビゲーション メニューは Web サイトの重要な部分の 1 つであり、ユーザーに閲覧や操作を提供します。ナビゲーション Web サイトの機能。さまざまな画面サイズやデバイスに適応できる応答性の高い垂直ナビゲーションをどのように作成するかが、解決しなければならない問題となっています。この記事では、HTML、CSS、jQuery を使用してレスポンシブな垂直ナビゲーションを作成する方法を説明します。

まず、ナビゲーション メニューのコンテナとメニュー項目を含む、基本的な HTML 構造を作成する必要があります。 <nav></nav> タグをナビゲーション メニューのコンテナとして使用し、<ul></ul> タグと <li> タグを使用してメニューを作成しますアイテム。コードは次のとおりです。

<nav class="vertical-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

次に、CSS を使用してナビゲーション メニューのスタイルを設定します。ナビゲーションメニューの幅、背景色、テキストの色などを設定する必要があります。同時に、垂直方向の配置の効果を実現するには、メニュー項目の幅と高さを設定する必要もあります。コードは次のとおりです。

.vertical-nav {
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.vertical-nav li {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.vertical-nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 20px;
}

.vertical-nav a:hover {
  background-color: #ccc;
  color: #fff;
}

これで、基本的な垂直ナビゲーション メニューの作成が完了しました。次に、jQuery を使用してメニュー項目をレスポンシブにします。

まず、jQuery ライブラリ ファイルを HTML に導入する必要があります。 jQuery の公式 Web サイトから最新バージョンのライブラリ ファイルをダウンロードし、<script></script> タグを使用して HTML に導入できます。コードは次のとおりです。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

次に、jQuery を使用して、メニュー項目がクリックされたときにサブメニューを展開または折りたたむクリック イベントを追加します。コードは次のとおりです。

$(document).ready(function() {
  $('.vertical-nav li').click(function() {
    $(this).find('ul').slideToggle();
  });
});

上記のコードでは、最初に $(document).ready() 関数を使用して、ドキュメントのロード後に jQuery コードが実行されるようにします。 。次に、.click() 関数を使用して、クリック イベントをメニュー項目にバインドします。メニュー項目がクリックされると、.slideToggle() 関数を使用してサブメニューを表示または非表示にします。

最後に、CSS メディア クエリを使用して、ナビゲーション メニューで応答性の高い効果を実現することもできます。画面幅が特定の値より小さい場合、ナビゲーション メニューを非表示にし、ボタンを使用してメニューを展開または折りたたむことができます。コードは次のとおりです。

@media (max-width: 768px) {
  .vertical-nav {
    display: none;
  }

  .vertical-nav.toggle {
    display: block;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .vertical-nav.toggle:before {
    content: "0c9";
    font-family: FontAwesome;
    font-size: 20px;
  }

  .vertical-nav.toggle.active:before {
    content: "00d";
  }
}

上記のコードでは、画面幅が 768 ピクセル未満の場合のスタイルを表すために @media (max-width: 768px) を使用しています。このメディア クエリでは、ナビゲーション メニューを非表示にし、メニューを展開または折りたたむためのボタンを追加します。また、FontAwesome アイコン ライブラリを使用して、メニューの展開状態または折りたたまれた状態を示す「 」または「-」アイコンを表示します。

これまでに、レスポンシブな垂直ナビゲーション メニューの作成が完了しました。 HTML、CSS、jQuery の組み合わせにより、メニュー項目の拡大または縮小効果を実現し、画面幅が一定の値未満の場合に応答性の高いメニュー ボタンを提供します。さまざまな設計や機能の要件に合わせてコードを調整および拡張できます。

以上がHTML、CSS、jQuery を使用して応答性の高い垂直ナビゲーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。