tags:

views:

67

answers:

4
Q: 

CSS, jQuery and Navigation Control - a minor tweak needed

I have a navigation that uses jQuery and CSS to control image mouseover positioning and dropdown menus. Everything works as it should. I have a request from the client though to make one modification.

You can see the example here: http://www.rouviere.com/jr/index.html (best viewed in Firefox or Safari right now)

If you mouse over the links the gold turns to green, however if you mouse over the drop down menu items the parent link changes back to gold. My client would like to have the parent link stay green. So my question is, how do I achieve that?

Here is the css for the parent link mouse over:

ul.dropdown li a.home:hover,
ul.dropdown li a.about:hover,
ul.dropdown li a.portfolio:hover,
ul.dropdown li a.maintenance:hover,
ul.dropdown li a.testimonials:hover,
ul.dropdown li a.contact:hover    { background-position: center center; }

Here is the navigation code:

        <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>

And last but not least here is the jQuery:

$(function(){

$("ul.dropdown li").hover(function(){

    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');

}, function(){

    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');

});

$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

Thanks in advance for the help!

A: 

Try something like this:

$('ul.dropdown li').hover(function() {
    $(this).parents('ul').addClass('hover');
});
henasraf  2010-02-24 23:39:15
It seems that I need hover class added to the parent li rather than the parent ul. What do you think? Thanks.
fmz  2010-02-25 00:08:03
Ah yes, I misread the code. Just fiddle with the selector till you get the desired result, the `parents()` part is what I meant to show you ;)
henasraf  2010-02-25 08:29:53
A: 

you can add a jQuery hover event handler for "sub_menu", and change the color of the dropdown manually.

Orentet  2010-02-24 23:39:54
I am using images for the background.
fmz  2010-02-25 00:08:34
A:  
$(this).parents('li').addClass('hover');

That should get the parent li and give it the hover class. Do the opposite (removeClass()) in the second function to get rid of the color.

If this has multiple li parents, it should give them the hover class as well. If you only want the first li then use li:first as the selector.

http://jeffrupert.com/test/ There's a working example. I used bind('mouseover' and bind('mouseout' simply because that's what I'm used to doing. I used your exact HTML, so hopefully that helps... All of the code is inline on the page, so it's easy to view.

Jeff Rupert  2010-02-24 23:42:16
Hi Jeff, I added this as directed but it still turns gold when I mouse out. If I could trouble you to take another look. It seems that we are looking for the parent of the parent since the it is li > ul > li. What do you think?
fmz  2010-02-25 00:03:07
My original idea was to use `$(this).parent().parent().addClass('hover');` Does that work? I'll play around a bit in Firebug and see what I can do.
Jeff Rupert  2010-02-25 00:14:34
Hi Jeff, I think I have found a couple of clues. The jQuery is targeting the <li> element, but the css is targeting the <a> tags. For example I have a.about:hover, so I am wondering if I need to target the parent <a>?
fmz  2010-02-25 00:23:45
In your CSS, does `ul.dropdown li.hover` exist? Or does the `<a>` tag have all of the styling on it? If it's the `<a>` tag, then you might want to append the class to the `<a>` tag and put the styling in there. I know that seems redundant, but the idea is that you can give the "parent" the class even if you aren't hovering over it. If that doesn't make sense, I'll build a little demo for you.
Jeff Rupert  2010-02-25 00:35:36
ul.dropdown li.hover does not exist. The jQuery mostly applies to the drop down portion of the navigation. the main navigation element styling is all based on the <a> tag like this: a.about:hover this way the background image changes when you mouse over it. The key is to retain that state when I mouse out but I am still mousing over the children in the drop down menu. Many thanks for your assistance.
fmz  2010-02-25 00:40:12
See edits above for a test of the dropdown.
Jeff Rupert  2010-02-25 01:51:57
+1  A: 

Why are you using jQuery to do what CSS lets you do? I think that if you use the following selectors:

ul.dropdown li a.home:hover,
ul.dropdown li:hover { /* this targets the parent li's default hover state set it to the green colour */ }

ul.dropdown li ul li:hover,
ul.dropdown li ul li a:hover { /* this targets the dropdown li's default state set this to gold */ }

It should work.

Edited in response to comment

Demo site seems stable, on Chrome, Firefox and Opera, found over at: http://davidrhysthomas.co.uk/so/parentLiStyles.html, please excuse the ugly. It's functional, not pretty... =/

Edited to bring the accepted code inline I figure, at some point, that I might tidy up my site, and the code might be more useful here anyway. So here it is, in its entirety:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>list styling demo-page for Stackoverflow.com question 1517220</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover  {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a  {width: 10em;
                    border
                    }

    #code           {white-space: pre-wrap;
                    width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    line-height: 1.2em;
                    font-family: consolas, mono;
                    }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

       <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>


<div id="code">
    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover
                    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover
                    {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a
                    {width: 10em;
                    border
                    }
</div>

</body>

</html>
David Thomas  2010-02-25 00:34:54
Does that help with getting the parent to highlight as well? Also, depending on what browsers in which the OP is testing, that might not work.
Jeff Rupert  2010-02-25 00:37:40
I should, really, add the caveat that I've not double-checked...I'll go do that now... =)
David Thomas  2010-02-25 00:38:49
The jQuery is mostly for the dropdown menus. I am doing a real hybrid operation here. I needed the drop downs and I needed the three images for the main navigation states so I combined the two.
fmz  2010-02-25 00:44:38
@fmz, that's fair enough, it just seemed that all the answers responding with jQuery events/functions were perhaps over-complicating things. In my live demo (tested only on Ubuntu 9.10) I've not used the same mark-up as your own, so if you need help translating it to yours feel free to raise a question/comment and I'll do what I can.
David Thomas  2010-02-25 01:00:27
I appreciate the extra-mile effort to post that solution. I cannot go from the parent element to the child thou. As soon as I mouse out of the parent, the dropdown menu vanishes.
fmz  2010-02-25 01:11:10
Okay, I've now changed the html (at the linked demo) to reflect your own, and the css still seems to work in Firefox (3.5.8), Opera (10.10.4742), Chrome (5.0.307.9) all on Ubuntu...what browser are you using?
David Thomas  2010-02-25 01:56:06
Brilliant. I only had to make one minor modification for it to work in my site. I changed this: ul.dropdown li.hover to this: ul.dropdown li.hover a { background-position: center center; } to account for the fact that the background images are tied to the <a> tag. Thank you for sticking with it for so long. I wish I could give extra credit points. Well done.
fmz  2010-02-25 02:04:12
No worries; I do this for *fun* after all... =) I'm glad it worked.
David Thomas  2010-02-25 02:05:58

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?