Simple menu collapse

HTML

<header class="clear-fix">
    <button class="hamb">menu</button>
    <nav>
        <ul class="menu clear-fix">
            <li><a href="javascript:void(0);">Menu item</a></li>
            <li><a href="javascript:void(0);">Menu item</a></li>
            <li><a href="javascript:void(0);">Menu item</a></li>
            <li><a href="javascript:void(0);">Menu item</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    background-color: #f06;
    
}

.clear-fix:before,
.clear-fix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clear-fix:after {
    clear: both;
}


header button {
    display: none;
}

header nav {
    border: 1px solid blue;
    width: auto;
    float: right;
}

header .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

header .menu li {
    float: left;
    margin-right: 1em;
}

header .menu a {
    color: white;
}

@media only screen and (max-width: 500px) {
    
    header nav {
        width: 100%;
        float: left;
    }
    
    header .menu {
        height: 0;
        overflow: hidden;
        width: 100%;
    }
    
    header .toggle-menu {
        height: auto;
    }
    
    header button {
        display: block;
        float: right;
    }

    header .menu li {
        width: 100%;
        float: left;
    }
    
}

JavaScript

$('button.hamb').on('click', function() {
    $('header .menu').toggleClass('toggle-menu');
});