Hide CSS menu on click

Question

Any idea how I can hide this dropdown when any item is clicked on? return it to its resting state? I want it to be hidden mainly for mobile users. It works fine as is right now, but on mobiles it stays open until another element of the page "happens" to be clicked on.

HTML

    <div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
    </ul>
</li>
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
    </ul>
</li>
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
    </ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li>
</ul>
</div>

CSS

ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;}
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial, 

Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;}
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;}
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden; 

display: none; border: 1px #000000 solid; border-bottom: none;}
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display: 

block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;}
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;}
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;}

jsfiddle http://jsfiddle.net/omvvL5z5/1/

Yes, i know! Looking for some solution to rehide it when any item is clicked on in javascript or jquery. — Bob, Dec 09 '14 at 03:37
I'm not sure stopping event propagation is the route to go, or the route I should take. Isn't there a way with JS to return the menu to it's default state? Something like `onClick='everything returns to normal';` ? — Bob, Dec 09 '14 at 03:48
@Bob you can't remove a focus pseudo class with Javascript. Your best bet is to create a 'hidden' css class, then apply it with javascript when something else is clicked on — anthonygore, Dec 09 '14 at 06:06
Those `div`s (the ones with `onclick` attrs) are not keyboard accessible. You should replace them with `button`s. — danielnixon, Dec 30 '14 at 09:30

Adam Forbis · Answer 1 · 2014-12-09T18:42:39.780

Use the JQuery $(".menubar").toggle() function inside a function you call when you click on a item. http://api.jquery.com/toggle/

This is the code I tried on jsfiddle: Try three

    <div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
    <li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
    <li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
    <li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
    <li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
    <li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
    </ul>
</li>
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
    <li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
    </ul>
</li>
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div>
    <ul class="menu">
    <li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
    <li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
    </ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li>
</ul>
</div>

Then just put in your other jquery

instead of what I did try

$('.menu > ul > li').click(function() {
$('.menu > ul.menu').toggle();
});
$('.button').hover(function(){$('.menu > ul.menu').show();});

You may also use something like bootstrap: http://getbootstrap.com/components/#navbar

This hides the whole menu bar. I simply want the dropdown part of the menu (submenu) to return to its `display:none;` state and for the menu anchor in class `.menubar` to return to its normal state as well, when a click is made on any of the menu or submenu items...sorry if I wasn't clear — Bob, Dec 09 '14 at 04:34
When using the toggle function it is necessary that you don't hide what it is you need to click on to bring it back up(because you can't click on it any more). — Adam Forbis, Dec 09 '14 at 05:13
Thank you for your most helpful input. I am almost ready to mark your response as the solution to my problem, but before I do so, I'd like to share one more thing just to see if you have any suggestions regarding it. When I click to hide the submenu, it no longer is visible (on hover) , until another menu click triggers it. Using the example code you posted above. Is there a way to keep this from happening? At this point, it almost looks like the only viable solution is to completely abandon the hover action to initiate the dropdown submenu. :-/ — Bob, Dec 09 '14 at 12:27

score -1 · Answer 2 · answered Dec 09 '14 at 05:06

-1

Please give this CSS for mobile css

   .menubar{
            display:none;
}

answered Dec 09 '14 at 05:06

Jateen Gadhiya

11
1
4

Hide CSS menu on click

2 Answers2