jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation

jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation

Ich habe eine Navigationsleiste mit einem erweiterten Animationseffekt entworfen und angepasst und versucht, eine Demo zu schreiben. Ich habe fast einen Tag gebraucht, um das Design fertigzustellen und es zu debuggen.
Hier werde ich darüber sprechen, wie man eine komplett selbst gestaltete Navigationsleiste vervollständigt, von Design -> Layout schreiben -> Stil schreiben -> JS-Code schreiben.

HTML wird zum Schreiben des Layouts verwendet, CSS zum Schreiben des Stils, JS zum Schreiben von Animationseffekten und Ereignisantworten usw. Angesichts der Benutzerfreundlichkeit von JQuery für DOM-Operationen kann die Entscheidung für die Verwendung von JQuery hier mit halbem Aufwand das doppelte Ergebnis erzielen.

Design:

Wenn Ihnen einige der heruntergeladenen Navigationsleisten-Plugins zu eintönig erscheinen, entwerfen Sie eine Navigationsleiste, die Ihnen gefällt. Sie können zunächst ein Blatt Papier nehmen und aufzeichnen, welche Art der Navigation Sie wünschen und welchen Effekt Sie am Ende erzielen möchten.
Wenn Sie hier beispielsweise eine Navigationsleiste schreiben möchten, können Sie, wenn Sie mit der Maus über die einzelnen Kapitel fahren, jeden Knoten darunter horizontal strecken und die Knoten mit einer Sprungaktion anzeigen.

Layout schreiben:

Nachdem Sie Ihre Gedanken geordnet haben, beginnen Sie mit dem Schreiben von HTML, was ein relativ einfacher Schritt ist. Im Allgemeinen reichen die Tags <div> <span> <a> aus. Es ist wichtig, die hierarchischen Beziehungen klar darzustellen.

Einige Anmerkungen:

<div> ist ein Element auf Blockebene. Das bedeutet, dass der Inhalt automatisch in einer neuen Zeile beginnt.
Das <span> -Tag nimmt keine eigene Zeile ein und wird im Allgemeinen zum Umbrechen von Inhalten verwendet. Da es sich nicht um ein Element auf Blockebene handelt, ist das Festlegen der Breiten- und Höhenattribute ungültig
Der <a> -Tag wird natürlich zum Platzieren von Links verwendet.

Schreibstil:

Das Debuggen des Stils muss langsam erfolgen und erfordert Geduld. Zur Farbabstimmung können Sie auf einige klassische Farbschemata zurückgreifen. Da wir jeden Knoten darunter horizontal ausdehnen möchten, benötigen wir einen Effekt, der einem mehrspaltigen Layout ähnelt. Die Tags <span> und <div> werden mit display:inline-block formatiert, um das Objekt als Inline-Objekt darzustellen, der Inhalt des Objekts wird jedoch als Blockobjekt dargestellt. Einfach ausgedrückt geht es darum, die Breite und Höhe festzulegen, ohne dass diese eine einzelne Zeile einnehmen müssen. Sie können auch das tolle CSS3-Layoutattribut display:flex verwenden, um ein mehrspaltiges Layout zu erzielen.

Schreiben Sie JS:

Nachdem das Layout geschrieben ist, muss die Funktionalität implementiert werden. Wie bereits erwähnt, können Sie in der Navigationsleiste mit der Maus über jedes Kapitel fahren und jeden Knoten darunter horizontal ausdehnen. Natürlich wird das Hover-Ereignis verwendet. Werfen wir einen Blick auf das Hover-Ereignis von jQuery.

$(Selektor).hover(Eingabefunktion,Ausgabefunktion)

Die erste Funktion in den Klammern ist erforderlich und gibt die Funktion an, die ausgeführt werden soll, wenn das Mouseover-Ereignis auftritt.
Die zweite Funktion ist optional und gibt die Funktion an, die ausgeführt werden soll, wenn das Mouseout-Ereignis auftritt.

jQuery kann auch problemlos Animationseffekte implementieren. Die Methode animate() ändert ein Element durch CSS-Stile von einem Zustand in einen anderen.
Dabei werden CSS-Eigenschaftswerte stufenweise verändert, so dass auch Animationseffekte erzeugt werden können, auf die ich hier allerdings nicht näher eingehe.

Da ich möchte, dass die Knoten der Reihe nach angezeigt werden, ich jedoch keine Animationswarteschlangen verwenden möchte, habe ich eine Rückruffunktion geschrieben, eine Verzögerung von setTimeout in die Rückruffunktion geschrieben und addClass verwendet, um dem entsprechenden Knoten einen Animationsstil hinzuzufügen.

Code:

<!--Erstellt von CC am 14.10.2017-->
 
<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>~meineNavigation~</Titel>
    <script type="text/javascript" src="jquery.js"></script>
    <!--Stil-->
    <style type="text/css">
 
        .Dreieck-rechts {
            Breite: 0;
            Höhe: 0;
            Rahmen links: 20px durchgezogen #FF7800;
            Rahmen unten: 20px durchgehend transparent;
            Rahmen oben: 2px gepunktet #333333;
            Anzeige: Inline-Block;
            Rand oben: 10px;
            vertikale Ausrichtung: oben;
        }
        .meinnav
        {
            Schriftfamilie: Zeichensetzung, „PingFangSC-Regular“, „Microsoft Yahei“, „sans-serif“;
            -webkit-font-smoothing: Subpixel-Antialiasing;
            Rand: 10px 2 %;
            Breite: 90 %;
            Höhe: 450px;
            Anzeige: Flex;
        }
        .nav-links{
             flex:auto;
            Höhe: 200px;
            Schriftgröße: 20px;
            Schriftstärke: 700;
            Textausrichtung: zentriert;
            Hintergrundfarbe: #505050;
            Farbe: #FF7800;
            Rahmen rechts: 3px durchgezogen #FF7800;
            Breite: 80px;
            Polsterung oben: 40px;
        }
        .nav-rechts
             flex:auto;
             Breite: 90 %
        }
        .nav-right div{
            Position: relativ;
        }
        .Kappe{
            Anzeige: Inline-Block;
            Breite: 70px;
            Höhe: 30px;
            Hintergrundfarbe: #FF7800;
            Rand: 10px 0;
            border-bottom:2px gepunktet #333333;
            Rahmen oben: 2px gepunktet #333333;
        }
 
        .Kind{
            Anzeige: Inline-Block;
            Breite: 0px;
            Rahmen oben: 2px gepunktet #333333;
            vertikale Ausrichtung: oben;
            Rand oben: 10px;
        }
        span.cap-child
        {
            Position: absolut;
            Rand: 2px durchgezogen #333333;
            Hintergrundfarbe: #505050;
            Farbe: #ffffff;
            -Webkit-Randradius: 8px;
            -moz-Randradius: 8px;
            Rahmenradius: 8px;
            /*oben:5px;*/
            links: 0px;
 
        }
        span.cap-child a{
            Schriftgröße: 15px;
            Farbe: weiß;
        }
        span.cap-child a:hover{
            Farbe: #ffc8aa;
        }
        .hr-über{
            Position: absolut;
            -Webkit-Randradius: 10px;
            -moz-Randradius: 10px;
            Rahmenradius: 10px;
            Hintergrundfarbe: #FF7800;
            Breite: 20px;
            Höhe: 20px;
            Rand oben: -10px;
            Rahmen: 1px durchgezogen #333333;
        }
        .zeige es{
            Animation: Cho-Show .5s;
        }
        @keyframes cho-show {
            0% {
                -webkit-transform-origin: rechts unten;
                Transform-Origin: rechts unten;
                -webkit-transform:rotate3d(0, 0, 1, 45 Grad);
                transformieren: 3d drehen (0, 0, 1, 45 Grad);
                Deckkraft: 0;
            }
            100 % {
                -webkit-transform-origin: rechts unten;
                Transform-Origin: rechts unten;
                -webkit-transform: keine;
                transformieren: keine;
                Deckkraft: 1;
            }
        }
 
    </Stil>
</Kopf>
<Text>
<!--Layout-->
<div Klasse="mynav">
    <div Klasse="nav-left">
        Inhalt
        <span style="Schriftgröße:6px">
            von cc
        </span>
    </div>
    <div Klasse="nav-rechts" >
        <div >
            <span class="cap ">Kapitel 1</span><div class="triangle-right"></div>
            <div Klasse="Kind">
            </div>
        </div>
        <div >
            <span class="cap">Kapitel 2</span><div class="triangle-right"></div>
            <div Klasse="Kind">
            </div>
        </div>
        <div >
            <span class="cap">Kapitel 3</span><div class="triangle-right"></div>
            <div Klasse="Kind">
            </div>
        </div>
    </div>
</div>
 
<Skripttyp="text/javascript">
    var aktiv='';
    var Leerzeichen=80;
    var myNodes = [{ name:'Kapitel1',
                    untergeordnete Elemente: [{name:'Zeichensatz',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
                    {name:'Kommentar',url:'cc/sd1/index'},
                    {name:'direkte Menge',url:'cc/sd2/index'}
        ]},
        {name:'Kapitel2',
        Kinder: [{Name: 'Nummer', URL: '#'},
        {name:'text',url:'#'},
        {name:'Boolescher Wert',url:'#'},
        {name:'globales Objekt',url:'#'},
        {name:'Verpackungsobjekt',url:'#'}
        ]},
        {
            Name:'Kapitel3',
            Kinder: [{name:'Cat',url:'#'},
            {name:'Kreativ',url:'#'}
        ]}
    ];
 
    $('.cap').hover(Funktion(){
        var cap = dies;
        var mybox=$(cap.parentNode).find('.child');
        wenn(aktiv!=dieses.innerHTML)
        {
            //Farbe ändern$(cap).css('background-color','#ffc8aa');
            $(cap).next().css('border-left-color','#ffc8aa');
            //Den ursprünglichen Inhalt bereinigen für (var j=0;j<$('.child').length;j++)
            {
                //Konsole.log($('.child')[j]);
                $($('.child')[j]).leer();
                $($('.child')[j]).css('Breite','0px');
            }
 
            aktiv=dieses.innerHTML;
            myNodes.forEach(Funktion(Element){
                    wenn(aktiv==Artikelname)
                    {
                        meineAnimate(item.children,mybox);
 
                    }
                }
            );
        }
         //Reihenfolge anzeigen orderShow($(mybox),$(mybox).children().length-1);
 
    }, Funktion(){
        //Farbe ändern$(this).css('background-color','#FF7800');
        $(diese).nächste().css('border-left-color','#FF7800');
 
    });
 
 
    Funktion myAnimate(arr,ele)
    {
       // konsole.log(ele);
        var $ele=$(ele);
        varpos;
        arr.forEach(Funktion(Element,Index){
            pos=Leerzeichen*Index+20;
            füge Eins hinzu(Element, Pos. + 'px');
        });
        $ele.animate({width:pos+100+'px'},200,'linear',Funktion(){
            var links = pos + 80 + 'px';
            $ele.append("<span class='hr-over' style='left:"+left+"'></span>");
        });
        Funktion addOne(Artikel, Position)
        {
            var meinlink="<a href='"+item.url+"'>"+item.name+"</a>";
            $ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
        }
    }
 
    Funktion orderShow($it,times)
    {
        wenn(mal>=0)
        {
            setzeTimeout(Funktion(){
                $($it.children()[times]).css('Anzeige','Block')
                $($it.children()[times]).addClass('zeige es');
            orderShow($es,mal-1)
        },100);
        }
        anders
            zurückkehren;
 
    }
</Skript>
 
</body>
</html>

Wirkung:

Dynamische Effekte:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Einfache jQuery-Navigationsleiste links und Seitenauswahleffekt
  • Implementierungscode für die schwebende JQuery-Navigationsleiste
  • Erstellen einer einfachen Navigationsleiste mit jQuery
  • Ein Beispiel, wie JQuery ausgewählte Stile zur Navigationsleiste der aktuellen Seite oder der Seite nach dem Springen hinzufügt
  • jQuery implementiert die Methode zum Ändern der Farbe des Menüelements in der Kopfzeile der Navigationsleiste nach dem Klicken
  • jQuery implementiert den Navigationsleisteneffekt, der den Listeninhalt nach dem Mausklick erweitert
  • jQuery+CSS, um den seitlichen Navigationsleisteneffekt zu erzielen
  • jQuery Mobile-Navigationsbarcode
  • jQuery klickt auf die Navigationsleiste, um den Implementierungscode zum Ändern des Stils auszuwählen
  • jQuery implementiert vertikale und horizontale Menünavigationsleiste

<<:  MySQL 8.0.17 winx64 (mit Navicat) manuelle Konfiguration Version Installation Tutorial Diagramm

>>:  CentOS 6-7 Yum-Installationsmethode für PHP (empfohlen)

Artikel empfehlen

Vue realisiert Preiskalendereffekt

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in die MySQL-Datenbank: Detaillierte Erläuterung der Konfigurationsmethode für mehrere Instanzen

Inhaltsverzeichnis 1. Was ist Multi-Instance 2. V...

Beispiel für das Hinzufügen einer Mehrsprachenfunktion zur Vue-Hintergrundverwaltung

Inhaltsverzeichnis 1. Konfigurieren Sie zunächst ...

Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE

Inhaltsverzeichnis 1. Hauptfunktionen 2. Umsetzun...

So implementieren Sie den Vue-Timer

In diesem Artikelbeispiel wird der spezifische Co...

Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)

Inhaltsverzeichnis Was ist bei der Registrierung ...

Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern

In diesem Artikel wird ein Nachrichtenfeld mit Sp...

ReactJs-Grundlagen-Tutorial - Essential Edition

Inhaltsverzeichnis 1. Einführung in ReactJS 2. Ve...

isPrototypeOf-Funktion in JavaScript

Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...

Realisieren Sie die Breadcrumb-Funktion basierend auf den Matched-Daten des Vue-Routers

In diesem Artikel wird hauptsächlich die Breadcru...

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Inhaltsverzeichnis Einführung Herunterladen und i...

Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren

Kommentare und Nachrichten waren ursprünglich ein...

Lösung für das Problem, dass der Server bei der Installation des Pagoda Panels keine Remoteverbindung zur Datenbank herstellen kann

Ich plane, meine eigene Website zu erstellen, als...

jQuery realisiert die Shuttle-Box-Funktion

In diesem Artikelbeispiel wird der spezifische Co...