PDA

View Full Version : How to have current selection stay highlighted when mouseover to dropline sub menu?



vixonb
02-17-2011, 10:40 PM
1) Script Title: jQuery Drop Line Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_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.

www.web-vn.com
04-07-2011, 01:49 PM
Well try this, I try and it work with my BAA project
The solution is 2 bold line (red is my highlight color, 999 is my normal color)


$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
$curobj.find('a:eq(0)').css("color","red")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left-120, top: $mainmenu.offset().top+this._dimensions.h-10,border:"5px solid #171717"})
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){
$curobj.find('a:eq(0)').css("color","#999")
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover