Super Simple Submenu Div

This is a simple fade-in-scale-in submenu div, that opens on click.

by Cam Gould

HTML

<a href="#" class="btn">Click here</a>

<div class="box">
    <p>This is where I put my 'submenu' content.</p>
    <a href="#" class="btn-close">x</a>
</div>

CSS

.btn {
    padding: 10px 20px;
    background: #e45740;
    color: #fff;
    height: 50px;
    line-height: 50px;
}
.box {
    width: 100%;
    background: #555;
    height: 0;
    overflow: hidden;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}
.box.show {
    display: block;
    height: 200px;
    -moz-opacity: 1.0;
    opacity: 1.0;
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
}
/* These styles are just for demo purposes */
 * {
    font-family: sans-serif;
    text-decoration: none;
}
.box p {
    float: left;
    color: #fff;
    padding: 20px;
}
.btn-close {
    float: right;
    color: #fff;
    margin: 20px;
}

JavaScript

$(".btn").click(function () {
    $('.box').addClass('show');
});
$(".btn-close").click(function () {
    $('.box').removeClass('show');
});