Heim > Web-Frontend > CSS-Tutorial > Wie implementiert man eine reaktionsfähige horizontale Seitennavigation mit jQuery und CSS?

Wie implementiert man eine reaktionsfähige horizontale Seitennavigation mit jQuery und CSS?

DDD
Freigeben: 2024-10-28 04:19:30
Original
589 Leute haben es durchsucht

How to implement a responsive horizontal page sliding navigation with jQuery and CSS?

Responsive horizontale Seitenverschiebung

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:


  1. Berechnen Sie die Anzahl der Folien und passen Sie die Breite des Wrappers an entsprechend.

  2. Legen Sie die Breite jeder Folie basierend auf der Anzahl der Folien fest, um sicherzustellen, dass sie horizontal passen.

  3. Verwenden Sie jQuery, um die linke Seite zu animieren Rand des Wrappers, um die entsprechende Folie anzuzeigen, wenn auf ein Element im Menü geklickt wird.

Diese Lösung bietet mehrere Vorteile:


  1. Es verwendet nur eine Instanz des Navigationsmenüs, um die Duplizierung von Markups zu minimieren.

  2. Es erfordert nur jQuery als eine Abhängigkeit.

  3. Es funktioniert für eine beliebige Anzahl von Folien und ist somit eine dynamische Lösung.

< 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>
Nach dem Login kopieren
$(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;
});
});
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage