Advanced Search

Results 1 to 2 of 2

Thread: How to have current selection stay highlighted when mouseover to dropline sub menu?

  1. #1
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to have current selection stay highlighted when mouseover to dropline sub menu?

    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.
    Last edited by vixonb; 02-18-2011 at 10:34 AM. Reason: add example to help describe problem

  2. #2
    Join Date
    Apr 2011
    Location
    http://web-vn.com
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

    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)
    Code:
    $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
    Last edited by jscheuer1; 04-07-2011 at 03:29 PM. Reason: remove hotlinks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •