Sidemenu
HTML
<div id="menu-button"></div>
<nav id="nav">
<ul>
<li>Главная</li>
<li>Контакты</li>
<li>О нас</li>
</ul>
</nav>
CSS
#menu-button {
background: url('http://icons.iconarchive.com/icons/iron-devil/ids-3d-icons-20/32/Hamburger-icon.png');
width: 32px;
height: 32px;
cursor: pointer;
}
#nav {
position: absolute;
background: #DDD;
padding: 10px;
left: -100%;
}
#nav.visible {
left: 0;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
margin: 0;
padding: 0;
}
JavaScript
$('#menu-button').click(function() {
$('#nav').toggleClass('visible');
});