jQuery dropdown menu CSS manipulation

Question

I'm using the jQuery Simple Drop-Down Menu Plugin from http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

In their example, when you hover a menu item, a red dropdown box appears. I can't figure out how to make the main tab red as well while the dropdown is visible. It should remain red when you also hover on the dropdown and return to normal via timeout. The code uses a timeout function so I'll have to somehow implement it into that.

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

I tried making a function for changing the background CSS and adding it to mouseover and mouseout, but it either changes the background for all menu tabs or nothing happens. Does anyone know a good solution?

No, I want to make the tab I hover red like the dropdown. Then when the dropdown disappears, i want to make it blue again. — CyberJunkie
– CyberJunkie, Commented Jun 28, 2011 at 17:41

Ahsan Rathod · Accepted Answer · 2011-06-28 18:30:20Z

2

Update your style sheet with this :

#jsddm li a:hover
    { background: #24313C }

    #jsddm li:hover > a
    { background: #24313C; display:block }

See the Demo :

http://jsfiddle.net/rathoreahsan/evcL2/2/

edited Jun 28, 2011 at 18:30

answered Jun 28, 2011 at 18:14

Ahsan Rathod

5,5252 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CyberJunkie Over a year ago

Thanks that's neat! Please note the timeout js function I mentioned in my post. The plain css method works but the dropdown menu remains visible longer because it uses timeout so I must implement the css change in jquery

Satish Over a year ago

That's neat! +1 for using jsfiddle.

Satish · Accepted Answer · 2011-06-28 17:44:58Z

2

Just add these lines to css

#jsddm li a:hover
{   
background: #8EA344
}

put any color in the background you want.

answered Jun 28, 2011 at 17:44

Satish

6,4958 gold badges45 silver badges63 bronze badges

2 Comments

CyberJunkie Over a year ago

Thanks but it should remain that color when you hover on the dropdown as well. For this reason I'm trying to modify the jquery.

Ahsan Rathod Over a year ago

See the answer I gave you. Update that styles in your current style sheet. Thanks!

Collectives™ on Stack Overflow

jQuery dropdown menu CSS manipulation

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related