Advanced Search

Results 1 to 3 of 3

Thread: jQuery Drop Line Menu - show active category?

  1. #1
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy jQuery Drop Line Menu - show active category?

    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:
    Code:
    .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 )
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screenshot.jpg 
Views:	155 
Size:	10.2 KB 
ID:	3426   Click image for larger version. 

Name:	Screenshot-1.jpg 
Views:	149 
Size:	10.3 KB 
ID:	3427  

  2. #2
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Have you found a solution yet? I'd like to know this as well!

  3. #3
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    .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:

    Code:
    .droplinebar ul li:hover ul li a
    And this line to the code that styled the sub level links hover style:

    Code:
    .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!
    Last edited by kittentaboo; 09-07-2010 at 02:26 PM. Reason: Forgot to mention something!

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
  •