can anybody help me about JQuery MagicLine Navigation to dropdown menu

[erlandazakaria]

can anybody help me ? i cant change the jQuery MagicLine Navigation to dropdown menu.. i dont have any clue anymore..

[erlandazakaria]

this is my code, can anybody fix it ?

$(function(){



var $el, leftPos, newWidth,

$mainNav = $("#example-one"),

$mainNav2 = $("#example-two");



/*

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").find("a").hover(function() {

$("ul.group li:has(ul)");

$("ul.group li ul").css('visibility', 'visible');

$el = $(this);

leftPos = $el.position().left;

newWidth = $el.parent().width();

$magicLine.stop().animate({

left: leftPos,

width: newWidth,

});

}, function() {

$("ul.group li:has(ul)"),

$("ul.group li ul")).css('visibility', 'hidden');



$magicLine.stop().animate({

left: $magicLine.data("origLeft"),

width: $magicLine.data("origWidth")

});

})

[TT_Mark]

You got a live demo we can take a look at?

[erlandazakaria]

I apologize, I tried to upload in web hosting(http://elandra.netau.net/)but apparently the script does not work, maybe something is missing .. Essentially, I edit the Magic line script that made chris on this site(https://css-tricks.com/examples/MagicLine/). I want to make it drop down menu. but I have trouble .. can you help me?

[TT_Mark]

You’re including the menu.js file before you include the JQuery library. Switch them around and you should get something :-)

should be

[erlandazakaria]

okay, thanks..
but my problem is i cant make it dropdown..
can you help me please ?
i haven’t clue anymore..

[TT_Mark]

The problem with your hover, is the following line

$("ul.group li ul").css('visibility', 'visible');

It is basically saying that if you hover over ANY of the menu items, you should show ALL of the dropdown lists, which is obviously not what you want to do. In Safari your menu does drop down and show the submenu, but the submenu appears in the wrong place and appears whenever you hover over any of the menu items.

You should change this line:

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

to:

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

then you will want to get the sibling ul for that a. Completely off the top of my head, I think it may be something like:

$(this).siblings("ul").css('visibility', 'visible')

[erlandazakaria]

I copy the suggestions you have, but still can not ..
This script is very intriguing, but I have no idea anymore ..
confused ..
thank you for your suggestions, but help me please…

[erlandazakaria]

its Magic line script so messy too, help me..

[erlandazakaria]

TT_Mark , thank you very much.. you so so help me… thanks… your script is working..

[cmsturg]

I am trying to make the same changes. Can you post your final solution?

[erlandazakaria]

final solution about what ?
about magic line dropdown ?

[nathh]

Please, can you post the complete final magic line dropdown code??

[erlandazakaria]

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/)”:

Home


AA


BB


CC


DD



DDa


DDb


DDc


DDd






EE


FF


GG



GGa


GGb

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?

[salehgaliwala]

Hi

I have created the demo page using erlandazakaria code .Its fantastic I have changed the code a bit so that magic line effect remains when hover on the sub menu

check out the demo here
http://unimax-systems.info/magic-dropdown.html

Saleh Galiwala
unimax SYSTEMS
[email protected]
http://unimax-systems.info

[Author]

Posts