JQuery-Navigation über seitliches Gleiten hinaus

Im modernen Webdesign ist das Navigationsmenü eine sehr wichtige Komponente. Mit der Beliebtheit mobiler Geräte hat die Vielfalt der Bildschirmgrößen zu mehreren Herausforderungen geführt. Wenn ein Navigationsmenü zu viele Elemente enthält, kann es die Breite des Bildschirms überschreiten. Daher ist eine Möglichkeit erforderlich, den Benutzern den Zugriff auf alle Optionen zu ermöglichen. In diesem Artikel stellen wir vor, wie Sie mit jQuery ein horizontal verschiebbares Navigationsmenü implementieren.

Zuerst müssen wir die HTML-Struktur und den HTML-Stil vorbereiten. Das Folgende ist eine grundlegende Navigationsmenüstruktur:

<div class="nav-container">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Join Us</a></li>
  </ul>
</div>

Wir verwenden CSS, um dieses Navigationsmenü horizontal anzuordnen und ihre Breite und andere Stile festzulegen.

.nav-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.nav {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav li {
  display: inline-block;
  text-align: center;
  width: 120px;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

Jetzt haben wir das grundlegende HTML und CSS bereit. Als Nächstes verwenden wir jQuery, um das Navigationsmenü horizontal zu verschieben. Wir erstellen einen Effekt, bei dem das Navigationsmenü horizontal verschoben wird, wenn auf die Pfeilschaltfläche geklickt wird.

Zuerst müssen wir einen Click-Event-Handler für die Pfeilschaltfläche hinzufügen. Hier ist ein jQuery-Codeausschnitt, der Klicks auf linke und rechte Pfeiltasten erkennt und das Navigationsmenü basierend auf der Richtung der Pfeiltasten verschiebt:

$('.nav-arrow').on('click', function() {
  var direction = $(this).data('direction');
  var distance = $('.nav li:first-child').outerWidth();

  if (direction === 'prev') {
    $('.nav-container').animate({scrollLeft: '-=' + distance});
  } else {
    $('.nav-container').animate({scrollLeft: '+=' + distance});
  }
});

Wir haben den Pfeiltasten ein Datenrichtungsattribut hinzugefügt, um zwischen links und rechts zu unterscheiden Pfeiltasten. Wenn der Benutzer auf die Pfeilschaltfläche klickt, erkennen wir die Eigenschaft data-direction und verwenden die animate()-Methode von jQuery, um die Position des Navigationsmenüs reibungslos zu verschieben.

Wir können auch einige interaktive Effekte hinzufügen, um das Benutzererlebnis zu verbessern. Wenn der Benutzer beispielsweise das äußerste linke oder rechte Ende des Navigationsmenüs erreicht, können wir die entsprechenden Pfeiltasten deaktivieren.

$('.nav-container').on('scroll', function() {
  var distance = $('.nav li:first-child').outerWidth();
  var scrollLeft = $(this).scrollLeft();

  if (scrollLeft === 0) {
    $('.nav-arrow.prev').addClass('disabled');
  } else {
    $('.nav-arrow.prev').removeClass('disabled');
  }

  if (scrollLeft + distance >= $('.nav').outerWidth()) {
    $('.nav-arrow.next').addClass('disabled');
  } else {
    $('.nav-arrow.next').removeClass('disabled');
  }
});

Wir haben einen Scroll-Event-Handler hinzugefügt, um die Scroll-Position des Navigationsmenüs zu erkennen. Wenn wir ganz nach links scrollen, fügen wir der linken Pfeilschaltfläche eine deaktivierte Klasse hinzu, sodass sie nicht angeklickt werden kann. Ebenso fügen wir die deaktivierte Klasse für die rechte Pfeiltaste hinzu, wenn wir ganz nach rechts scrollen.

Schließlich können wir eine Initialisierungsfunktion hinzufügen, um den Anfangszustand der Pfeiltasten und des Navigationsmenüs festzulegen.

function initNav() {
  var distance = $('.nav li:first-child').outerWidth();
  var navWidth = $('.nav').outerWidth();
  var containerWidth = $('.nav-container').outerWidth();

  if (navWidth > containerWidth) {
    $('.nav-arrow.next').removeClass('disabled');
  }

  $('.nav-arrow').css('top', ($('.nav').outerHeight() / 2 - $('.nav-arrow').outerHeight() / 2));

  $('.nav li').each(function() {
    var itemWidth = $(this).outerWidth();
    if (itemWidth > distance) {
      distance = itemWidth;
    }
  });

  $('.nav li').each(function() {
    $(this).css('width', distance + 'px');
  });
}

initNav();

In der Funktion initNav() ermitteln wir zunächst die Breite des Navigationsmenüs und die Breite des Containers. Wenn die Breite des Navigationsmenüs die Breite des Containers überschreitet, aktivieren wir die rechte Pfeiltaste.

Als nächstes zentrieren wir die Pfeilschaltflächen vertikal und stellen die Navigationsmenüelemente auf die gleiche Breite ein. Da die Breite jedes Menüelements unterschiedlich sein kann, müssen wir die maximale Breite des Menüelements ermitteln und festlegen.

Bisher haben wir jQuery vollständig verwendet, um den horizontalen Gleiteffekt des Navigationsmenüs zu erzielen. Sie können die vollständige Code-Implementierung auf der folgenden JSFiddle anzeigen:

https://jsfiddle.net/36qa5x1t/

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie mit jQuery den horizontalen Gleiteffekt des Navigationsmenüs erzielen. Wir haben die grundlegende HTML- und CSS-Struktur eingeführt und dieses Navigationsmenü durch das Hinzufügen von Click- und Scroll-Ereignishandlern und einigen interaktiven Effekten verfeinert. Ich hoffe, dass Sie durch diesen Artikel besser verstehen, wie Sie mit jQuery interaktive Effekte auf Webseiten erzielen.

Das obige ist der detaillierte Inhalt vonJQuery-Navigation über seitliches Gleiten hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!