Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript can anybody help me about JQuery MagicLine Navigation to dropdown menu Re: can anybody help me about JQuery MagicLine Navigation to dropdown menu

#48294

This is the html code “dont forget to call the css code, jquery menu code, and the jquery basic code (http://blog.jquery.com/2011/03/31/jquery-152-released/)”:



This is the css code :


/*=== Menu Styles ===*/

.nav-wrap {

background-color: #222;

border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-bottom-color: #333;

margin-right: auto;
margin-left: auto;
padding-left:16%;
}


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

#example-one { margin: 0 auto; list-style: none; position: relative; width: auto;

}
#example-one li {
display: inline;
}
#example-one li a {
font-family: Georgia, Times, serif;
color: #fff;
font-size: 11px;
display: block;
float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
font-weight: bold;
letter-spacing: 0px;
}
#example-one li a:hover {
color: #5555FF;
}
#magic-line {
position: absolute;
bottom: +2px;
left: 0;
width: 100px;
height: 1px;
background-color: #fff;
z-index: 3;
}
.current_page_item a { color: #fff !important; }

#example-one li ul{

width: 240px;
visibility: hidden;
position: absolute;
top: 100%;
z-index: 2;
}

#subMenu{
font-weight: normal;
color: #000;
background-color: #222;
border: 1px solid #111;
position: relative;
margin: 0px;
padding: 0px;

}
#subMenu a{
text-align:left;
color: #000;
width: 220px;

border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-bottom-color: #111;
}

#subMenu a:hover{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}

This is the javascript code :


$(function(){

var $el, leftPos, newWidth,
$mainNav = $("#example-one");

/*
EXAMPLE ONE
*/
$mainNav.append("
  • ");

    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());



    $("ul.group li a").hover(function() {

    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $("ul.group li").hover(function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
    $('ul:first',this).css('left', leftPos);
    },function() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
    }),

    $magicLine.stop().animate({
    left: leftPos,
    width: newWidth,
    });

    }, function() {
    $magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
    });
    });

    $("ul#subMenu li").hover(function() {
    $magicLine.stop().animate();
    $("#magic-line").css('visibility', 'hidden');

    }, function() {
    $("a.suba").css('color', '#fff');
    $("#magic-line").css('visibility', 'visible');
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    });

    });

    Sorry i cant give you the live demo, but i can guarantee this script is works cause i use this one.. OK?