Superb jQuery MagicLine Navigation menu

Superb jQuery MagicLine Navigation menu

Tuesday, July 05, 2011 | Posted by ArtisTutor | Edit Post

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.

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email