HTML、CSS、jQuery: 美しい垂直スクロールナビゲーションを構築する-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-10-24 10:54:30

オリジナル

1309 人が閲覧しました

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

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

HTML 構造

まず、ナビゲーションバーの HTML 構造を決定する必要があります。この例では、順序なしリスト <ul></ul> を使用してナビゲーションメニューを作成し、スタイル class.nav-item ;li> でアイテム &lt をリストします。 は各ナビゲーションボタンを表します。各ナビゲーションボタンには、ナビゲーションボタンのテキストコンテンツを表示する <a></a> 要素が含まれています。

<nav>
  <ul class="nav-menu">
    <li class="nav-item active"><a href="#home">首页</a></li>
    <li class="nav-item"><a href="#about">关于我们</a></li>
    <li class="nav-item"><a href="#services">服务</a></li>
    <li class="nav-item"><a href="#portfolio">作品</a></li>
    <li class="nav-item"><a href="#contact">联系我们</a></li>
  </ul>
</nav>

ログイン後にコピー

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 ファイルの下部にある <body> タグの前に次のコードを追加して、jQuery ライブラリを導入します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ログイン後にコピー

次に、次のコードを追加します。 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 つの関数を実装しています:

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

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

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

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