Toggle Div combined with CSS-Hover

Question

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.

It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)

The CSS:

  #expandMenu {
        background-color: #009cff;
        opacity: 0.8;   
        height:65px;
        width:100%;
        display:none;
    }
    #menubar {
        height:95px;
        width: 100%;
        color:#FFF;
    }
    #menubar:hover {
        background-color:#0f0f0f;   
        transition: background-color 0.3s ease;
        color:#FFF;
    }

jQuery:

$(document).ready(function(e){
      $("#pageTitle").click(function() {   $('#expandMenu').slideToggle( "fast");
       $('#menubar').css( "background-color", "#0f0f0f" );  } );

})

HTML:

<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>

Answer 1

I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.

I check whether the expandMenu is visible and adjust the classes accordingly:

if ($('#expandMenu').is(':visible'))
{
    $('#menubar').removeClass('menu-active');
}
else
{
    $('#menubar').addClass('menu-active');
}

I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.