jQuery MagicLine Navigation

Diese „gleitenden“ Navigationsbalken gibt es schon eine Weile, ich dachte mir, ich versuche es selbst, da sich kürzlich die Gelegenheit bot. Es stellt sich heraus, dass es wirklich verdammt einfach ist. Ich habe zwei Beispiele dafür zusammengestellt.

Die Idee

Die Idee ist, eine Art Hervorhebung (einen Hintergrund oder eine Unterstreichung) zu haben, die Ihnen folgt, wenn Sie mit der Maus über die verschiedenen Links in der Navigation fahren. Dies geschieht mit jQuery und seinen Animationsfähigkeiten. Daher wird die „Magic Line“ nur über JavaScript hinzugefügt. Sobald sie zur Liste hinzugefügt und gestylt ist, ermittelt sie beim Überfahren der verschiedenen Links die linke Position und die Breite und animiert sich entsprechend.

HTML

Typische Liste hier… Sie hat die Klasse „group“, da sie eine horizontale Reihe sein wird und die Clearfix benötigt, um Höhe zu haben. Die ID ist für das JavaScript, um sie anzusprechen.

<nav class="nav-wrap">
  <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
  </ul>
</nav>

Beachten Sie die .nav-wrap div drumherum. Diese wird wegen des Stylings verwendet; die Balken gehen über die volle Bildschirmbreite, aber die Navigation ist darin zentriert. Dieses Zentrieren wirft ein Problem auf, wenn wir mit dem JavaScript beginnen.

CSS

Machen Sie die üblichen Inline-Listenelemente mit nach links gefloateten Ankern, um die Liste horizontal zu gestalten und Treppenbildung zu vermeiden. Die Magic Line ist absolut positioniert unter dem Balken, damit sie kein Zittern verursacht (Maus über einen Link, animiert darüber, Maus ist jetzt auf der Magic Line, nicht mehr auf dem Link, animiert zurück, usw.). Alles andere ist rein stilistisch.

.nav-wrap { margin: 50px auto;  background-color: rgba(0, 0, 0, 0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

jQuery JavaScript

1. Wenn der DOM bereit ist…
2. Einrichtung von Variablen, einschließlich des aktuellen linken Offsets der Navigation
3. Einrichtung einer Resize-Funktion am Fenster, um diesen Offset zurückzusetzen, falls er sich ändert (wegen der Zentrierung)
4. Hinzufügen der Magic Line zur Navigation
5. Einrichtung von Position und Breite der Magic Line für das aktuelle Seiten-Element
6. Speichern Sie auch die ursprüngliche Breite und Position als Daten, damit sie zum Zurückanimieren verwendet werden können
7. Beim Hovern wird die neue Breite und die neue linke Position berechnet und dorthin animiert
8. Im Hover-Callback (Mouse Out) animiert es zurück zum Original

Aktualisiert, dank kluger Kommentare von Daniel und Nora Brown unten.

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");
    
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
});

Demo

Sehen Sie den Pen
jQuery MagicLine von Chris Coyier (@chriscoyier)
auf CodePen.

Probleme

Opera ist damit seltsam. Es macht die ursprüngliche Breite der Magic Line zur vollen Breite des Navigationsbalkens und kürzt sie von rechts bei Hover. Ich konnte es nicht herausfinden. Wenn Sie es können, lassen Sie es mich wissen, ich werde diesen Artikel und die Demos aktualisieren.

Alternative Version

Sehen Sie sich den Demo-Link unten für eine alternative Version an, die einen Hintergrund anstelle einer Linie verwendet und Farbe sowie Position und Breite animiert. Grundsätzlich dasselbe, außer dass die CSS leicht unterschiedlich ist und das JavaScript die Farbe des neuen Listenelements aus einem rel-Attribut im HTML zieht.

Farbanimationen in jQuery erfordern das color plugin. Ich habe gerade darüber gejammert, dass es mit RGBa-Farben nicht funktioniert, und jemand hat mir einen Patch geschickt, der das tut und der im Download enthalten ist. Es tut mir wirklich leid, aber ich erinnere mich nicht mehr an seinen Namen! Melden Sie sich, wenn Sie es waren, und ich werde dies aktualisieren und den Patch Ihnen gutschreiben.

Alles Ihres

Wie immer, fühlen Sie sich frei, damit zu tun, was Sie wollen. Vorzugsweise verwenden Sie es in Firmenprojekten und verdienen Sie Schubkarren voller Geld.