レスポンシブな水平方向のページ スライド

問題

レスポンシブな水平型ナビゲーション システムの設計にはいくつかの課題があります:

• ページの維持ビューポート内の可視性
• ビューポート間の隙間や重なりを防ぐページ
• スクロールバーを表示して高さ 100% を超えるページを許可
• Internet Explorer 9 以降との互換性を確保

解決策

このソリューションは jQuery を採用しており、次の主要な機能が含まれています:

1. レスポンシブサイズ設定: スクリプトはページ数に基づいてラッパーの合計幅を計算し、応答性の高いスケーリングを保証します。
2. スムーズな遷移: ナビゲーション リンクをクリックすると、ラッパーの左マージンがスムーズにアニメーション化されます。突然ジャンプすることなくページ間を遷移します。
3. 動的高さ処理: ページはそれを超えて拡張できます。高さ 100%、必要に応じてスクロールバーが表示され、不要なギャップが排除されます。
4. アクティブ リンクの表示: 選択したナビゲーション リンクが強調表示され、現在のページの位置が示されます。
5. IE 互換性: コードは Internet Explorer 9 以降と互換性があります。

コード実装

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

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;
}

結論

このコード スニペットは、応答性の高い水平方向のページ ナビゲーションのための包括的なソリューションを提供し、指定された要件に効率的に対処します。その柔軟性により、動的なナビゲーション メニューやスクロールバーを備えた長いページへの対応が可能になります。さらに、Internet Explorer 9 との互換性により、幅広いブラウザとの互換性が保証されます。