Log in

View Full Version : jQuery Drop Line Menu - show active category?



schnecksche
07-22-2010, 08:40 AM
Hi there,

I'm currently designing a website using the jQuery Drop Line Menu. However, I've run into an issue when trying to customize it:

I've added a line to the section controlling the look of the main menu bar links so that an arrow appears underneath the menu item the mouse is hovering over:


.droplinebar ul li a:hover, .droplinebar ul li .current {
/* font color and background of main menu bar links onMouseover */

color: #3a3c3d;

background: url(images/arrow.gif) no-repeat bottom center;

}


(see Screenshot.jpg)

No big deal.

What I want is the arrow to stay in place when I move the mouse to the sub menu so the user can still see the "active" category. Which it currently doesn't (see Screenshot-1.jpg).

Unfortunately, I don't know if this can even be solved via CSS or if this is a JavaScript issue, so please advise :)

(I should add that even though I have a basic understanding of CSS and JavaScript, I've never had to dig into this matter quite as deep as I'm doing right now ;))

kittentaboo
09-03-2010, 08:17 PM
Have you found a solution yet? I'd like to know this as well!

kittentaboo
09-07-2010, 02:24 PM
To all who are interested, I came up with a solution to this question. See my code here:

http://www.kitacreative.com/hosting/droplinebar.html

Here's what I added to the stylesheet in order to get the parent item to remain in its rollover state:



.droplinebar ul li:hover a {
color: #7d4199;
}


But this also changed the color of all the child items, so I added this line to the part of the code that styled the sub level links to change the color back:



.droplinebar ul li:hover ul li a


And this line to the code that styled the sub level links hover style:



.droplinebar ul li:hover ul li a:hover


I'm not using the arrow images that the original poster used, but I imagine you can achieve the same effect by targeting the background image instead of the link color.

I tested it in IE7, Firefox 3.6.8 and Safari 5.0.1, and all seems well... If anyone knows a more efficient way to achieve the same goal, please post a reply!