HTML、CSS、jQuery: 美しい垂直スクロール ナビゲーションを構築する

HTML、CSS、jQuery: 美しい垂直スクロール ナビゲーションを構築する

Web デザインにおいて、ナビゲーション バーは非常に重要なコンポーネントです。美しく使いやすいナビゲーション バーは優れたユーザー エクスペリエンスを提供し、ユーザーに直感的なナビゲーション システムを提供します。この記事では、HTML、CSS、jQuery を使用して美しい垂直スクロール ナビゲーション バーを構築し、具体的なコード例を示します。

HTML 構造

まず、ナビゲーション バーの HTML 構造を決定する必要があります。この例では、順序なしリスト

CSS スタイル

次に、CSS スタイルを使用してナビゲーション バーをデザインし、レイアウトします。基本的なスタイルの例を次に示します。

.nav-menu { list-style: none; margin: 0; padding: 0; } .nav-item { display: block; margin-bottom: 10px; } .nav-item a { display: block; padding: 10px; text-decoration: none; color: #333; background-color: #f1f1f1; border-radius: 3px; } .nav-item.active a { color: #fff; background-color: #333; }

これらの基本スタイルを使用すると、単純な垂直ナビゲーション バーを作成し、アクティブなナビゲーション ボタンにさまざまなスタイルを適用できます。

jQuery スクロール効果

次に、ナビゲーション ボタンをクリックすると、ページが対応するセクションまでスムーズにスクロールするように、ナビゲーション バーにスムーズ スクロール効果を追加する必要があります。この効果を実現するには、jQuery ライブラリを使用します。

まず、HTML ファイルの下部にあるタグの前に次のコードを追加して、jQuery ライブラリを導入します。

次に、次のコードを追加します。 JavaScript ファイル内のコード:

$(document).ready(function() { // 点击导航按钮时，平滑滚动到相应的节段 $('a[href^="#"]').on('click', function(event) { event.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { $('html, body').stop().animate({ scrollTop: target.offset().top }, 1000); } }); // 根据滚动位置添加活动导航按钮样式 $(window).scroll(function() { var scrollDistance = $(window).scrollTop(); $('.nav-item').each(function(i) { if ($(this).position().top <= scrollDistance + 100) { $('.nav-item.active').removeClass('active'); $('.nav-item').eq(i).addClass('active'); } }); }).scroll(); });

上記のコードは 2 つの関数を実装しています:

1. ナビゲーション ボタンをクリックすると、ページは対応するセクションまでスムーズにスクロールします。 jQuery のanimate()関数を使用して、スムーズなスクロール効果を実現します。
2. ナビゲーション ボタンのスタイルは、ページをスクロールすると自動的にアクティブ状態に切り替わります。 jQuery のscroll()関数を使用して、ページ スクロール イベントをリッスンし、スクロール位置に基づいて現在のセクションにアクティブなスタイルを追加しました。

上記の jQuery コードを Web ページに追加することで、美しい垂直スクロール ナビゲーション バーが完成しました。

要約すると、HTML、CSS、jQuery を組み合わせることで、美しい垂直スクロール ナビゲーション バーを簡単かつエレガントに構築できます。この例を通じて、これらのテクニックを適用して Web デザインのユーザー エクスペリエンスを向上させる方法をよりよく理解できます。

以上がHTML、CSS、jQuery: 美しい垂直スクロール ナビゲーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。