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

HTML、CSS、および jQuery: 美しいスクロールタブナビゲーションを構築する

WBOY

リリース： 2023-10-26 09:30:18

オリジナル

1137 人が閲覧しました

HTML、CSS、および jQuery: 美しいスクロールタブナビゲーションを構築する

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

現代の Web デザインでは、スクロールタブナビゲーションが一般的なデザイン要素になっています。訪問者に簡単なナビゲーションを提供し、Web ページの対話性を高めます。この記事では、HTML、CSS、jQuery を使用して美しいスクロールタブナビゲーションを構築する方法を紹介し、具体的なコード例を示します。

まず、HTML の基本構造を理解する必要があります。簡単な HTML コードの例を次に示します:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>滚动标签导航</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
    </ul>
  </nav>

  <section id="section1">
    <h1>Section 1</h1>
    <p>This is the content of section 1.</p>
  </section>

  <section id="section2">
    <h1>Section 2</h1>
    <p>This is the content of section 2.</p>
  </section>

  <section id="section3">
    <h1>Section 3</h1>
    <p>This is the content of section 3.</p>
  </section>

  <section id="section4">
    <h1>Section 4</h1>
    <p>This is the content of section 4.</p>
  </section>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、<nav> 要素を使用してナビゲーションメニューを含めます。 ## 要素と <li> 要素は、ナビゲーションメニューのリスト項目を作成するために使用されます。各リスト項目は、ページの対応するセクション (<section>) へのリンク (<a>) です。各セクションは一意の id 属性を使用して識別されることに注意してください。次に、CSS でナビゲーションメニューのスタイルを設定する必要があります。簡単な CSS コード例を次に示します。

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 0;
  z-index: 999;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px;
}

nav ul li a.active {
  border-bottom: 2px solid #fff;
}

ログイン後にコピー

この例では、いくつかの基本的な CSS スタイルを使用して、ナビゲーションメニューの外観を設定します。

position:fixed

を設定することで、ナビゲーションメニューをページの上部に固定します。また、flex レイアウトを使用して、ナビゲーションメニューリスト項目を水平方向に中央揃えにし、それらにある程度の間隔を追加しました。ここで、jQuery を使用していくつかのインタラクティブな機能を追加します。以下は、簡単な jQuery コードの例です。

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();

    $('section').each(function() {
      var offsetTop = $(this).offset().top - 50;
      var sectionHeight = $(this).outerHeight();
      var sectionId = $(this).attr('id');

      if (scrollPos >= offsetTop && scrollPos < (offsetTop + sectionHeight)) {
        $('nav ul li a').removeClass('active');
        $('nav ul li a[href="#' + sectionId + '"]').addClass('active');
      }
    });
  });
});

ログイン後にコピー

このコードでは、

scroll

イベントを使用してスクロールイベントをリッスンします。スクロールが発生すると、各 <section> 要素を反復処理し、スクロール位置に基づいて現在アクティブなセクションを決定します。 offset() メソッドを使用して各セクションの先頭位置を取得し、scrollTop() メソッドを組み合わせて現在のスクロール位置を取得することで、どのセクションがそのセクションにあるかを判断できます。ビューポート。アクティブなセクションが特定されたら、対応するナビゲーションリンクに active クラスを追加して強調表示します。これで、優れたスクロールタブナビゲーションが構築されました。ユーザーがページをスクロールすると、ナビゲーションメニューが自動的に更新され、現在アクティブなセクションが表示されます。このコード例が役に立ち、より良い Web デザインを構築するのに役立つことを願っています。

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