Um eine responsive horizontale Navigation ähnlich der in dem von Ihnen bereitgestellten Bild zu erstellen, Sie können eine Kombination aus CSS und jQuery verwenden. Das folgende Snippet passt die Seitengröße an die Bildschirmbreite auf jedem Gerät an:
Diese Lösung bietet mehrere Vorteile: p>
< p>Um zu verhindern, dass Bildlaufleisten auf Folien mit kürzerem Inhalt angezeigt werden, legen Sie die Mindesthöhe der Seiten im CSS fest:
<code class="css">.page { min-height: 100%; }</code>
$(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; }); });
<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <nav> <a href="#page-1" class="scrollitem selected">Page 1</a> <a href="#page-2" class="scrollitem">Page 2</a> <a href="#page-3" class="scrollitem">Page 3</a> </nav> <div id="page-1" class="page"> <h3>Page 1</h3> <div class="simulate">Simulated content higher than 100%</div> </div> <div id="page-2" class="page"> <h3>Page 2</h3> <div class="simulate">Simulated content higher than 100%</div> </div> <div id="page-3" class="page"> <h3>Page 3</h3> <div class="simulate">Simulated content higher than 100%</div> </div> </div></code>
Das obige ist der detaillierte Inhalt vonWie implementiert man eine reaktionsfähige horizontale Seitennavigation mit jQuery und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!