Superb jQuery MagicLine Navigation menu

I recently came across with this two superb menus, so I wanted to share with you all.
Very simple to add to your blog the menus are based on jQuery and for the "magic" to take place comes in scene a little javascript.
The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. As such, the "magic line" will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

How to add superb jQuery Magicline navigation menu?


1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
.nav-wrap { 
 margin: 5px auto; 
 background-color: rgba(0,0,0,0.6); 
 border-top:    2px solid white; 
 border-bottom: 2px solid white; 
}

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

/* Example One */
#example-one { 
 margin: 0 auto; 
 list-style: none; 
 position: relative; 
 width: 960px; 
}
#example-one li { 
 display: inline-block; 
}
#example-one a { 
 color: #bbb; 
 font-size: 14px; 
 float: left;
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase;
}
#example-one a:hover { 
 color: white; 
}
#magic-line { 
 position: absolute;
 bottom: -2px; 
 left: 0; 
 width: 100px; 
 height: 2px; 
 background: #fe4902;
}
.current_page_item a { 
 color: white !important; 
}
.ie6 #example-one li, .ie7 #example-one li { 
 display: inline; 
}
.ie6 #magic-line {
 bottom: -3px;
}


/* Example Two */
#example-two { 
 margin: 0 auto; 
 list-style: none; 
 position: relative; 
 width: 960px; 
}
#example-two li { 
 display: inline-block; 
}
#example-two li a { 
 position: relative; 
 z-index: 200; 
 color: #bbb; 
 font-size: 14px; 
 display: block; 
 float: left; 
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase; 
}
#example-two li a:hover { 
 color: white; 
}
#example-two #magic-line-two { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100px; 
 background: #900; 
 z-index: 100; 
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.current_page_item_two a { 
 color: white !important; 
}
.ie6 #example-two li, .ie7 #example-two li {
 display: inline;
}

You notice that in the code are two examples of menu. You can chose only one to use or both . You decide.

4. Now find the </head> tag and before it paste the code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js' type='text/javascript'/>
<script src='http://artistutorials.googlecode.com/files/jquery.color-RGBa-patch.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// DOM Ready
$(function() {

    var $el, leftPos, newWidth;
        $mainNav2 = $("#example-two");
    
    /*
        EXAMPLE ONE
    */
    
    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#example-one").append("<li id='magic-line'></li>");
    
    /* Cache it */
    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").find("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")
        });    
    });
    
    
    
    
    /*
        EXAMPLE TWO
    */
    
    $mainNav2.append("<li id='magic-line-two'></li>");
    
    var $magicLineTwo = $("#magic-line-two");
    
    $magicLineTwo
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));
                
    $("#example-two a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
            backgroundColor: $magicLineTwo.data("origColor")
        });    
    });
    
    /* Kick IE into gear */
    $(".current_page_item_two a").mouseenter();
    
});
//]]>
</script>

If you have Jquery instaled on your template delete the red line.
Also here you have the script for both menu examples. Chose to use only one or both. Your choise.

5. The next step is to find:

<div id='art-main'>    <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test 3 (Header)' type='Header'>
<b:includable id='title'>

... in your template the title of the header will be different.

6. Now paste the next code after <div id='art-main'>:


6.1 For the Example 1 menu:

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

6.2 And for the Example 2 menu:

<div class="nav-wrap">   
        
        <ul class="group" id="example-two">
            <li class="current_page_item_two"><a rel="#fe4902" href="#">Home</a></li>
            <li><a rel="#A41322" href="#">Buy Tickets</a></li>
            <li><a rel="#C6AA01" href="#">Group Sales</a></li>
            <li><a rel="#900" href="#">Reviews</a></li>
            <li><a rel="#D40229" href="#">The Show</a></li>
            <li><a rel="#98CEAA" href="#">Videos</a></li>
            <li><a rel="#1B9B93" href="#">Photos</a></li>
            <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
        </ul>
        
    </div>

The red lines represent the color of each menu item

7. Save the template and see the result.

Get Latest Updates For Free!

Subscribe via Email

8 comments

Anonymous
July 18, 2011 at 7:41 PM

nice menu!!!!
i have many items for my menu. How can to make 2 lines of this menu. If

July 19, 2011 at 10:24 AM

For the moment it's not possible to add submenus.

Anonymous
July 19, 2011 at 12:00 PM

i do not want submenus... i want to have two menus (two lines) like your demo with your examples but with the same effect...

July 20, 2011 at 8:15 PM

Add the code on step 6.1 or 6.2 again under the previous menu

November 4, 2011 at 11:53 PM

why colour is not work for me?

November 5, 2011 at 6:20 PM

@mcunovelReplace :

http://descarca.googlecode.com/files/jquery.js

with this one:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js

March 11, 2012 at 8:27 AM

How i can add "magic line" only some menu items?
For example the first and third!

March 12, 2012 at 12:08 PM

@ArtemDelete from the step 6 code the lines you don't want.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers