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

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

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

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


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


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

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

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


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


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

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

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

$(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;
});
});

Page 1
Page 2
Page 3


Page 1
Simulated content higher than 100%


Page 2
Simulated content higher than 100%


Page 3
Simulated content higher than 100%

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