Toufik Toufik - 1 year ago 53
CSS Question

Closing drop-down menu by clicking on the button itself

I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.

My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.

This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?

I would be very grateful. Thanks in advance.

Edit: Here's an example of what I ment:

Link to jsfiddle ->

I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.


If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:

$('[data-toggle]').on('click', function(e){
    var thisLink = $(this);
    var toToggle = $('toggle') );
* {
    font-family: sans-serif;
.toggle-menu a {
    display: block;
    float: right;
    padding: 5px 20px;
    text-align: center;
    background: none #F1B475;
    cursor: pointer;
#menu-main {
    background: none #FA982E;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
#menu-main a {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
#menu-main a:hover,
#menu-main a:focus {
    background: none #D0812D;
<script src=""></script>
<div class="toggle-menu">
        <a data-toggle="#menu-main" title="Click to toggle">+</a>
<ul id="menu-main">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    Other content

Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground