レスポンシブな水平型ナビゲーション システムの設計には、いくつかの課題があります。
このソリューションは jQuery を採用しており、次の主要な機能が含まれています:
<code class="javascript">$(document).ready(function() { var slideNum = $('.page').length, wrapperWidth = 100 * slideNum, slideWidth = 100 / slideNum; $('.wrapper').width(wrapperWidth + '%'); $('.page').width(slideWidth + '%'); $('a.scrollitem').click(function() { $('a.scrollitem').removeClass('selected'); $(this).addClass('selected'); var slideNumber = $($(this).attr('href')).index('.page'), margin = slideNumber * -100 + '%'; $('.wrapper').animate({ marginLeft: margin }, 1000); return false; }); });</code>
<code class="css">html, body { height: 100%; margin: 0; overflow-x: hidden; position: relative; } nav { position: absolute; top: 0; left: 0; height: 30px; } .wrapper { height: 100%; background: #263729; } .page { float: left; background: #992213; min-height: 100%; padding-top: 30px; } #page-1 { background: #0C717A; } #page-2 { background: #009900; } #page-3 { background: #0000FF; } a { color: #FFF; } a.selected { color: red; } .simulate { height: 2000px; }</code>
このコード スニペットは、レスポンシブな水平ページ ナビゲーションのための包括的なソリューションを提供し、記載された要件に効率的に対処します。その柔軟性により、動的なナビゲーション メニューやスクロールバーを備えた長いページへの対応が可能になります。さらに、Internet Explorer 9 との互換性により、幅広いブラウザーとの互換性が保証されます。
以上がjQuery と CSS を使用してレスポンシブな水平ページ スライディング システムを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。