Pop-up menu

A simple way to make pop-up menus. This method may change the layout of the page to leave space for the menu to appear.

by Tomás Antunes

HTML

<div class="menu-button">
    <button type="button" name="simple-btn" class="simple-btn">Menu</button>
</div>
<div class="popmenu"> 
    <ul>
        <li>About</li>
        <li>Terms</li>
        <li>Privacy</li>
    </ul>
</div>

CSS

.popmenu {
    background-color: #3f6fc5;
    border-radius: 10px;
    clear: both;
    width: 150px;
    }
.popmenu ul li {
    list-style:none;
    color: #ffffff;
    }

JavaScript

$(document).ready(function() {
    $('.popmenu').hide();
    $('.simple-btn').click(function() {
        $('.popmenu').toggle()
    });
})