CODEWITHSUNDEEP
jqueryhtmlcssmenu
user3095078
user3095078

Reputation: 5

css javascript menu submenu issue

Hi I'm trying to create a horizontal menu bar for a website that will have sub menus beneath it and that is justified (at least the top level items).

The idea is that when on the home page the top level items are visible, when hovering over the top level items I would like the item to change colour and the sub menus to become visible, then when hovering over the sub menu these should change colour. This all seems to work fine.

What I'm struggling with is once I click on the top level item and I am taken to that page I need the sub menu for that item to stay visible until I hover over any of the other top level items (as the overlap in the space I've got). The only way i can think to achieve this is to use jQuery to hide the active sub menu when hovering over the other top level items but the problem with this is even when hovering over the "active" selection the sub menu becomes hidden.

I've tried to achieve what I'm after with just css but I'm starting to think its not possible, which is why I'm now looking at the jQuery option, but now I'm stuck here too! I've possibly massively overcomplicated things.

I've made a fiddle to help try to explain what I'm on about:

http://jsfiddle.net/vLZv7/

This is as though you have selected the first top level item and you are now on "parent1.html"

Any help or guidance would be really appreciated.

My code:

<div class='menu'>
<ul>
    <li class='active'><a href="#">Parent 1</a>
    <ul>
        <li><a href="#">Sub 1-1</a></li>
        <li><a href="#">Sub 1-2</a></li>
        <li><a href="#">Sub 1-3</a></li>
    </ul>
    </li>
    <li><a href="what-we-do.php">Parent 2</a>
    <ul>
        <li><a href="#">Sub 2-1</a></li>
        <li><a href="#">Sub 2-2</a></li>
        <li><a href="#">Sub 2-3</a></li>
    </ul>
    </li>
    <li><a href="#">Parent 3</a>
    <ul>
        <li><a href="#">Sub 3-1</a></li>
        <li><a href="#">Sub 3-1</a></li>
    </ul>
    </li>
</ul>
</div>

CSS:

.menu ul{
    text-align:justify;
    width:300px;
    min-width:500px;
    margin-top:60px;
}
.menu ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
.menu ul li{
    display:inline-block;
    list-style:none;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.menu ul li a{
    text-decoration:none;
    color:#000;
}
.menu ul li:hover a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
    display:none;
}

.menu ul li:hover ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu ul li:hover ul li a{
    color:#000;
    border:none;
    margin-right:25px;
}
.menu ul li:hover ul li:hover a{
    color:#CCCC00;
}
.menu li.active a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu li.active ul li a{
    color:#000;
    margin-right:25px;
    border-bottom:none;
}
.menu li.active ul li:hover a{
    color:#CCCC00;
    margin-right:25px;
}
.hide{
    display:none;
}

Simple jQuery:

$('.menu').hover(
function(){ $('.menu li.active ul li a').addClass('hide') },
function(){ $('.menu li.active ul li a').removeClass('hide') }
)

Upvotes: 0

Views: 1133

Answers (2)

DaniP
DaniP

Reputation: 38262

You can change the selector that fires the event to match li elements like this:

$('.menu li').hover( ......

And then unbind() the hover action for .active item:

$('.menu li.active').unbind('mouseenter mouseleave');

http://jsfiddle.net/vLZv7/7/

Upvotes: 0

php-dev
php-dev

Reputation: 7156

No simpler than

$('.menu li:not(.active)').hover(
    function(){ $('.menu li.active ul li a').addClass('hide') },
    function(){ $('.menu li.active ul li a').removeClass('hide') }
)

Upvotes: 2

Related Questions