jQuery MagicLine menü
Szerző: Gergő | JQuery | 2010 február 24. 15:57

24 feb 0

MagicLine menü

Egy menü alapvető feladata, hogy könnyű navigációt biztosítson, azonban nem utolsó szempont a felhasználói élmény sem amit nyújthat. Ez a cikk egy ilyen animált menü elkészítésén vezet végig.

Az alap ötlet

A menünkbe szeretnénk mindig aláhúzni azt az elemet, ami fölé visszük az elemet, és itt egy kis jQuery varázslatot is teszünk bele: a vonal nem csak egyszerűen megjelenik, hanem mindig az aktuálisan kiválasztott menüelemtől, elúszik addig az elemig ami fölé húztuk az egerünk, onmouseout-ra pedig újra visszacsúszik alaphelyzetbe.

HTML

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<div 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>
</div>

CSS

1.
2.
3.
4.
5.
6.

.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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

$(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")
        });
    });
});