Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)

I have a menu with the possibility that some menu items will have subitems. Pretty simple, actually. I would like to achieve that once the submenu is moused over, the corresponding (parent) menu item is highlighted as well. This never happens because seems like as soon as the mouse leaves the menu item and gets over the submenu, the browser styles it to its default style. Any help appreciated! Thanks a lot!

Menu html:

<div id="top_navigation">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a>
                <ul class="submenu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li class="selected_menu_item"><a href="#">sub3</a></li>
                </ul>
            </li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
        </ul>
    </div>

CSS:

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 23px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 312px;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    list-style: none;
}
#top_navigation ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #eb1f10;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation li li {
    height: 42px;
    line-height: 42px;
    border-top: #eb1f10 1px solid;
}

JS/Jquery:

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');
        },
        function() {
            $('ul', this).slideUp('fast');
        }
    );
});

Example can be found here: http://jsfiddle.net/qguTz/

like image 714
Fygo Avatar asked May 28 '13 22:05

Fygo


2 Answers

Oh, now I don't know how this didn't occur to me before... I will answer it:

It is enough to swap this:

#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}

for this:

#top_navigation ul li:hover > a {
    background-color: #eb1f10;
    color: #FFF;
}
like image 114
Fygo Avatar answered Nov 20 '22 16:11

Fygo


To achieve that, you need two little modification.

First one is the CSS. I added a selector to an already existing style declaration :

#top_navigation ul li a:hover, #top_navigation ul li a.hovered {
    background-color: #eb1f10;
    color: #FFF;
}

Then i changed the css to add that class :

$nav.hover(
    function() {
        $(this).children('a').addClass('hovered')
        $('ul', this).stop(true, true).slideDown('fast');
    },
    function() {
        $(this).children('a').removeClass('hovered')
        $('ul', this).slideUp('fast');
    }
);

Then, everything worked! http://jsfiddle.net/qguTz/6/

like image 35
Karl-André Gagnon Avatar answered Nov 20 '22 15:11

Karl-André Gagnon