HTML、CSS、jQuery: アニメーションの垂直メニューを作成する

HTML、CSS、jQuery: アニメーション付きの垂直メニューを作成する

現代の Web デザインでは、動的な効果がユーザーの注意を引く重要な要素の 1 つになっています。 1つ。 Web ページのナビゲーション メニューでは、アニメーション効果により、ユーザーに優れた視覚体験と操作性を提供できます。この記事では、HTML、CSS、jQuery を使用してアニメーション垂直メニューを作成する方法と、具体的なコード例を紹介します。

1. HTML 部分

まず、HTML を使用してメニューの構造を構築する必要があります。 body タグに div 要素を追加して、メニュー全体をラップします。次に、メニュー項目のコンテナとしてその div 要素に順序なしリスト (ul) を追加します。各メニュー項目には、対応するページにジャンプするためのリンク (a) 要素が必要です。簡単な HTML コードの例を次に示します。

<div class="vertical-menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

2. CSS セクション

次に、CSS を使用してメニューのスタイルを設定する必要があります。まず、背景色、文字色、余白などの基本的なスタイルをメニュー項目に追加します。次に、CSS セレクターを使用して、メニュー項目の上にマウスを移動したときにメニュー項目のスタイルを設定し、ホバー効果を実現します。最後に、メニューにアニメーション効果を追加して、ユーザー エクスペリエンスを向上させます。

以下は簡単な CSS コードの例です:

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

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

.vertical-menu li a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 8px 16px;
}

.vertical-menu li a:hover {
  background-color: #ddd;
}

.vertical-menu li a.active {
  background-color: #4CAF50;
  color: #fff;
}

.vertical-menu li a.active:hover {
  background-color: #45a049;
}

3. jQuery 部分

最後に、jQuery を使用してメニューをアニメーション化します。 .slideToggle() メソッドを使用すると、メニュー項目がクリックされたときにサブメニューを展開または折りたたむことができます。さらに、 .addClass() メソッドと .removeClass() メソッドを使用して、現在選択されているメニュー項目の .active クラスを追加または削除して、そのスタイルを変更することもできます。

以下は簡単な jQuery コードの例です:

$(document).ready(function() {
  $(".vertical-menu li").click(function() {
    $(this).children("ul").slideToggle("slow");
    $(this).children("a").toggleClass("active");
  });
});

これで、アニメーション効果を備えた垂直メニューの作成が完了しました。ユーザーがメニュー項目をクリックすると、サブメニューがアニメーション化されて展開または折りたたまれ、現在選択されているメニュー項目の背景色が変わります。ニーズに応じてコードをさらに最適化および調整して、よりパーソナライズされた効果を実現できます。

概要:

この記事では、HTML、CSS、jQuery を使用してアニメーション付きの垂直メニューを作成する方法を紹介します。 HTML でメニュー構造を構築し、CSS でスタイルを追加し、jQuery でアニメーション効果を実装することで、Web ページのナビゲーション メニューにインタラクティブ性を加えてアピールすることができます。この記事が、Web デザインでアニメーション効果を使用する練習に少しでも役立つことを願っています。

以上がHTML、CSS、jQuery: アニメーションの垂直メニューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。