Responsive horizontale Seitenverschiebung

Problem

Das Entwerfen eines reaktionsfähigen horizontalen Navigationssystems bringt mehrere Herausforderungen mit sich:

• Pflege der Seite Sichtbarkeit innerhalb des Ansichtsfensters
• Verhinderung von Lücken oder Überlappungen zwischen Seiten
• Ermöglichung von Seiten, die über 100 % der Höhe hinausgehen, mit Sichtbarkeit der Bildlaufleiste
• Gewährleistung der Kompatibilität mit Internet Explorer 9 oder höher

Lösung

Diese Lösung verwendet jQuery und umfasst die folgenden Hauptfunktionen:

1. Responsive Sizing: Das Skript berechnet die Gesamtbreite des Wrappers basierend auf der Anzahl der Seiten, wodurch eine reaktionsfähige Skalierung gewährleistet wird.
2. Sanfter Übergang: Durch Klicken auf Navigationslinks wird der linke Rand des Wrappers sanft animiert, sodass der Übergang zwischen den Seiten ohne abrupte Sprünge erfolgt.
3. Dynamische Höhenverwaltung: Seiten können über 100 % Höhe hinausgehen, und bei Bedarf wird eine Bildlaufleiste angezeigt, um unerwünschte Lücken zu beseitigen.
4. Anzeige aktiver Links: Die ausgewählte Navigation Der Link wird hervorgehoben, um die aktuelle Seitenposition anzuzeigen.
5. IE-Kompatibilität: Der Code ist mit Internet Explorer 9 und höher kompatibel.

Code-Implementierung

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

Fazit

Dieses Code-Snippet bietet eine umfassende Lösung für eine responsive horizontale Seitennavigation und erfüllt effizient die genannten Anforderungen. Seine Flexibilität ermöglicht dynamische Navigationsmenüs und die Anpassung langer Seiten mit Bildlaufleisten. Darüber hinaus gewährleistet die Kompatibilität mit Internet Explorer 9 die Kompatibilität mit einer Vielzahl von Browsern.