jQuery と CSS を使用してレスポンシブな水平ページ スライド ナビゲーションを実装するにはどうすればよいですか?

レスポンシブ水平ページ スライド

指定した画像と同様のレスポンシブ水平ナビゲーションを作成するには、 CSS と jQuery を組み合わせて使用​​できます。次のスニペットは、任意のデバイスの画面幅に合わせてページのサイズを変更します:

1. スライドの数を計算し、ラッパーの幅を調整します。


2. 各スライドが水平方向に収まるように、スライドの数に基づいて各スライドの幅を設定します。


3. jQuery を使用して左側をアニメーション化します。メニュー内の項目をクリックしたときに、ラッパーの余白を変更して、対応するスライドを表示します。

このソリューションには、いくつかの利点があります: p>

1. マークアップの重複を最小限に抑えるためにナビゲーション メニューのインスタンスを 1 つだけ使用します。


2. 必要なのは jQuery だけです


3. 任意の数のスライドで機能し、動的なソリューションとなります。

コンテンツが短いスライドにスクロールバーが表示されないようにするには、CSS でページの最小高さを設定します:

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">Page 1</a>
<a href="#page-2" class="scrollitem">Page 2</a>
<a href="#page-3" class="scrollitem">Page 3</a>
</nav>
<div id="page-1" class="page">
<h3 id="Page">Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3 id="Page">Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3 id="Page">Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

以上がjQuery と CSS を使用してレスポンシブな水平ページ スライド ナビゲーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。