指定した画像と同様のレスポンシブ水平ナビゲーションを作成するには、 CSS と jQuery を組み合わせて使用できます。次のスニペットは、任意のデバイスの画面幅に合わせてページのサイズを変更します:
このソリューションには、いくつかの利点があります: p>
< 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
Simulated content higher than 100%
Page 2
Simulated content higher than 100%
Page 3
Simulated content higher than 100%
以上がjQuery と CSS を使用してレスポンシブな水平ページ スライド ナビゲーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。