CSS+jQuery Menu

A simple dropdown menu to the left side of the webpage. It has a very modern UI and looks nice.

by Drew Christensen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
    <div class="toggle-menu">
        <h3 class="menu-heading">Menu <i class="fa fa-fw fa-chevron-circle-down"></i></h3>
        <div class="list-group menu"> 
            <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
            <a class="list-group-item" href="#"><i class="fa fa-wrench fa-fw"></i> Tools</a>
            <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
            <a class="list-group-item" href="#"><i class="fa fa-wifi fa-fw"></i> Connect</a>
        </div>
    </div>
    <div class="container">
        <div class="heading">
            <h1>Not Bootstrap!</h1>
        </div>
        <div class="content">
            <p>No Bootstrap is included in this webpage.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
        </div>
    </div>
</body>

CSS

body {
    font-family:'Arial', 'Trebuchet MS', sans-serif;
    font-weight: bold;
    vertical-align: top;
    margin-top: 10px;
}
.container {
    display: inline-block;
    vertical-align: top;
    border: 1px solid #CCC;
    border-radius: 5px;
    background-color: white;
    width: 60%;
}
.container>.heading {
    text-align: center;
    background-color: white;
    padding: 15px;
    border-bottom: 1px solid #CCC;
}
.container>.heading:hover {
    background-color: #EEE;
}
.container>.content {
    background-color: white;
    padding: 20px;
}
.container>.content:hover {
    background-color: #EEE;
}
.toggle-menu {
    vertical-align: top;
    display: inline-block;
    width: 30%;
    height: 100%;
    margin-left: 0px;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 5px;
    background-color: white;
    text-align: center;
}
.toggle-menu:hover {
    background-color: #EEE;
}
.list-group {
    background-color: white;
    border-radius: 5px;
}
.menu-heading {
    margin: 5px;
}
.list-group-item {
    text-align: left;
    background-color: white;
    display: block;
    text-decoration: none;
    color: black;
    padding: 15px;
    border: 1px solid #DDD;
    border-bottom: none;
}
.list-group-item:nth-child(1) {
    border-radius: 5px 5px 0px 0px;
}
.list-group-item:last-child {
    border-radius: 0px 0px 5px 5px;
    border-bottom: 1px solid #DDD;
}
.list-group-item:hover {
    background-color: #EEE;
}

JavaScript

var toggleMenu = function () {
    var menu = $('.menu');
    menu.slideToggle(300);
};
var onMenu = function () {
    var menu = $('.menu');
    menu.slideDown(300);
};
var offMenu = function () {
    var menu = $('.menu');
    menu.slideUp(300);
};
var main = function () {
    offMenu();
    $('.toggle-menu').hover(onMenu, offMenu);
};
$(document).ready(main);