1) Script Title: jQuery Drop Line Menu
2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...line_menu/P10/
3) Describe problem: I Have customised this script to work brilliantly, thanks.
I have added a current style in the css:
.droplinebar ul li .current{
color: #9B834F;
font-weight: normal;
}
and would like to know how to implement this current selection in the javascript so when you rollover to submenu the current top level nav stays highlighted in gold. Also the drop down sometimes flickers?
Please see example of working navigation to help explain:
http://www.test.tuchdesign.com/test.html
As you can see the main nav changes colour to gold on rollover but reverts back to black when you mouseover to the sub menu, I want the gold text to remain highlighted when you mouseover to sub menu.
My js code:
/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
arrowimage: {classname: '', src: '', leftpadding: 1}, //customize down arrow image
animateduration: {over: 50, out: 10}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
''
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
Thanks for your help.



Reply With Quote
Bookmarks