Home › Forums › JavaScript › can anybody help me about JQuery MagicLine Navigation to dropdown menu
- This topic is empty.
-
AuthorPosts
-
December 28, 2010 at 2:40 pm #31112erlandazakariaMember
can anybody help me ? i cant change the jQuery MagicLine Navigation to dropdown menu.. i dont have any clue anymore..
December 29, 2010 at 12:24 pm #68395erlandazakariaMemberthis 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")
});
})December 29, 2010 at 12:40 pm #68396TT_MarkMemberYou got a live demo we can take a look at?
December 29, 2010 at 2:37 pm #68400erlandazakariaMemberI 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?
December 29, 2010 at 3:29 pm #68401TT_MarkMemberYou’re including the menu.js file before you include the JQuery library. Switch them around and you should get something :-)
should be
December 30, 2010 at 1:32 am #68247erlandazakariaMemberokay, thanks..
but my problem is i cant make it dropdown..
can you help me please ?
i haven’t clue anymore..December 30, 2010 at 9:27 am #68275TT_MarkMemberThe 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')
December 31, 2010 at 5:11 pm #67924erlandazakariaMemberI 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…December 31, 2010 at 5:12 pm #67925erlandazakariaMemberits Magic line script so messy too, help me..
January 3, 2011 at 12:07 pm #67746erlandazakariaMemberTT_Mark , thank you very much.. you so so help me… thanks… your script is working..
February 13, 2011 at 7:54 am #60660cmsturgMemberI am trying to make the same changes. Can you post your final solution?
February 13, 2011 at 11:29 am #60666erlandazakariaMemberfinal solution about what ?
about magic line dropdown ?April 29, 2011 at 2:34 pm #48740nathhMemberPlease, can you post the complete final magic line dropdown code??
April 30, 2011 at 12:51 pm #48294erlandazakariaMemberThis 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?
May 7, 2011 at 1:40 am #46718salehgaliwalaMemberHi
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.htmlSaleh Galiwala
unimax SYSTEMS
[email protected]
http://unimax-systems.info -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.