Toufik Toufik - 1 year ago 69
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 ->
https://jsfiddle.net/Cerebrl/uhykY/

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.

Answer Source

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){
	e.preventDefault;
    var thisLink = $(this);
    var toToggle = $( thisLink.data('toggle') );
    toToggle.slideToggle(200);
})
* {
    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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
    <p>
        HALLO
        <a data-toggle="#menu-main" title="Click to toggle">+</a>
    </p>
    
</div>
<ul id="menu-main">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>
<p>
    Other content
</p>

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