Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln

Dieser Artikel beschreibt, wie man mit reinem Javascript ein einfaches JS-Plugin entwickelt. Dieses Plugin kann dafür sorgen, dass der unten stehende Slider automatisch vom aktuellen Menü zum ausgewählten Menü gleitet, wenn die Maus über die Navigation bewegt wird.

Der Quellcode dieses Projekts wird auf GitHub gehostet. Klicken Sie bitte auf die Sterne:

https://github.com/dosboy0716/sliding-nav

1. Einleitung

Die Wirkung ist wie folgt:

2. Nutzung

Um dieses Plugin in Ihrem Projekt verwenden zu können, sind nur die folgenden drei Schritte erforderlich:

1. Verweisen Sie vor dem Ende des Tags </body> auf die Datei sliding-nav.js

2. Fügen Sie dem Menücontainer, der einen Schieberegler benötigt, den Klassennamen „sliding-nav“ hinzu. Das aktuelle Element verwendet den Klassennamen „active“

3. Verwenden Sie Attribute, um das Erscheinungsbild zu bestimmen: sn-color="color" sn-radius="roundness" sn-height="height"

<script src="/Pfad/zu/sliding-nav.js"></script>
<ul class="nav sliding-nav" sn-color="#F00" sn-radius="0px" sn-height="3px">
 <li class="active">Menüpunkt 1</li>
 <li>Menüpunkt 2</li>
 <li>Menüpunkt 3</li>
<ul>

3. Entwicklungsprozess

1. Modellbeispiel

Navigationsmenüs verwenden im Allgemeinen die oben gezeigte hierarchische Struktur. Der äußere Container verwendet das Tag <ul> und die Menüelemente das Tag <li>. Wenn Sie einen kleinen gelben horizontalen Balken anzeigen möchten, ist die Positionierung wichtig.

Nach der Analyse muss der kleine horizontale Balken zwar optisch innerhalb der UL lokalisiert sein, aber um den ursprünglichen Navigationsstil nicht zu zerstören, muss der kleine gelbe Balken eine absolute Positionierung verwenden und seine Anfangsposition muss mit dem UL-Tag übereinstimmen.

Daher fügen wir den kleinen horizontalen Balken vor dem <ul>-Tag ein, wie im kleinen grauen Punkt oben gezeigt. Dies ist die Anfangsposition des kleinen horizontalen Balkens, d. h. (links=0, oben=0).

Wie können wir also erreichen, dass die Leiste direkt unter den Menüelementen angezeigt wird?

• Weisen Sie der oberen Eigenschaft der kleinen Leiste die Höhe des Menüelements zu (also die Eigenschaft „offsetHeight“).
• Weisen Sie die Eigenschaft left des kleinen Balkens dem linken Rand des Menüelements zu (also die Eigenschaft offsetLeft)

Um die oben genannten Funktionen zu implementieren, können Sie den folgenden Code verwenden:

Funktion init() {
 
 var navs = document.getElementsByClassName('sliding-nav');
 
 für (var i = 0; i < navs.length; i++) {
 
 
  //Erstellen Sie ein DIV, um es vertikal an der aktuellen Navigation auszurichten. var indi = document.createElement("div");
  indi.id = "slna-Indikator"
 
  indi.style.borderRadius = navs[i].getAttribute("sn-radius") || "0px"
  indi.style.height = navs[i].getAttribute("sn-height") || "3px"
  indi.style.backgroundColor = navs[i].getAttribute("sn-color") || "#F00"
 
  indi.style.position = "absolut"
  indi.style.transition = "0,5 s"
 
  //Suchen Sie das aktuelle Untermenüelement. Wenn es den Klassennamen „aktiv“ oder „ausgewählt“ hat, wird es als aktuelles Element betrachtet. Wenn nicht, verwenden Sie das erste Element var selected = navs[i].getElementsByClassName('active')
  wenn (ausgewählte.Länge == 0) {
   ausgewählt = navs[i].getElementsByClassName('ausgewählt')
  }
  wenn (ausgewählte.Länge == 0) {
   ausgewählt = navs[i].children
  }
 
  wenn (ausgewählte.Länge == 0) {
   throw Error('Entschuldigung, die Navigationsleiste enthält überhaupt kein Element!');
  }
 
  ausgewählt = ausgewählt[0];
 
  indi.style.width = ausgewählte.OffsetWidth + "px";
  indi.style.top = ausgewählt.offsetHeight + "px";
  indi.style.left = ausgewählt.offsetLeft + "px";
  navs[i].parentElement.insertBefore(indi, navs[i]);
 
  //Unvollendet, fügen Sie unten Code ein, um Ereignisse zu binden}
 
}

Der obige Code erstellt die Initialisierungsfunktion init(), die:

Suchen Sie alle Tags mit dem Klassennamen „sliding-nav“, fügen Sie gemäß der obigen Methode ein Div-Tag davor ein, das als „Anzeigeleiste“ fungiert, und suchen Sie das „aktive“ Menüelement. Nachdem Sie es gefunden haben, positionieren Sie die „Anzeigeleiste“ über die verschiedenen Eigenschaften dieses Menüelements.

2. Events und Animationen

Wir setzen die Übergangseigenschaft des Div-Tags „Indikatorleiste“ auf 0,5 s, sodass wir das Div nur direkt im Ereignis wie folgt festlegen müssen:

• Das linke Attribut kann die Bewegung des "Indikatorbalkens" realisieren.
• Mit dem width-Attribut lässt sich die Breite des „Indikatorbalkens“ festlegen.

Daher können Sie zur Implementierung von Ereignissen und Animationen am Ende des obigen Codes folgenden Code einfügen:

für (var j = 0; j < navs[i].children.length; j++) {

   hover(navs[i].children[j], Funktion(e, Element) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //Beim Verlassen der Navigation Standardwert wiederherstellenhover(navs[i], null, function(e, elem) {
    indi.style.width = ausgewählte.OffsetWidth + "px";
    indi.style.left = ausgewählt.offsetLeft + "px";
   });

  }

Der Code verwendet eine benutzerdefinierte Hover-Funktion, die der Implementierung eines Hover-Ereignisses ähnelt. JS verfügt nativ nur über Mouseover- und Mouseout-Ereignisse.

Die Funktion besteht darin, die Mouse-In- und Mouse-Out-Ereignisse an die DOM-Elemente zu binden. Informationen zum spezifischen Implementierungsprozess finden Sie im Originalcode des Autors.

4. Alle Originalcodes

Alle in diesem Artikel implementierten Originalcodes lauten wie folgt. Ich hoffe, die Leser können weitere Optimierungsvorschläge machen, damit wir gemeinsam ein schöneres Front-End-Erlebnis schaffen können.

für (var j = 0; j < navs[i].children.length; j++) {

   hover(navs[i].children[j], Funktion(e, Element) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //Beim Verlassen der Navigation Standardwert wiederherstellenhover(navs[i], null, function(e, elem) {
    indi.style.width = ausgewählte.OffsetWidth + "px";
    indi.style.left = ausgewählt.offsetLeft + "px";
   });

  }

Dies ist das Ende dieses Artikels über die Verwendung von Javascript zur Entwicklung eines Sliding-Nav-Navigations-Plug-Ins mit Slider-Effekt. Weitere verwandte JS-Entwicklungsinhalte für Sliding-Nav-Navigationsleisten-Plug-Ins finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!