Das Entwerfen eines reaktionsfähigen horizontalen Navigationssystems bringt mehrere Herausforderungen mit sich:
Diese Lösung verwendet jQuery und umfasst die folgenden Hauptfunktionen:
<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>
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.
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit jQuery und CSS ein responsives horizontales Seitenschiebesystem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!