Foundation zurb snippet: Sidebar left menu

Designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.

<link href="" rel="stylesheet"> <div id="wrapper" class="wrapper-content"> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> </a> </li> <li> <a href="#">Dashboard</a> </li> <li> <a href="#">Shortcuts</a> </li> <li> <a href="#">Overview</a> </li> <li> <a href="#">Events</a> </li> <li class="active"> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <div id="page-content-wrapper"> <nav class="navbar navbar-default"> <div class="container-fluid"> <button class="btn-menu btn btn-success btn-toggle-menu" type="button"> <i class="fa fa-bars"></i> </button> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="large-12"> <h1>Sidebar Menu</h1> <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens.</p> <p>Make sure to keep your content here</p> </div> </div> </div> </div> </div>
body{ background:#f4f3ef; } #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background:#fff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper { box-shadow: inset -1px 0px 0px 0px #DDDDDD; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #000; background: none; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } } #sidebar-wrapper > a:after { border-right: 17px solid #f4f3ef; border-top: 17px solid transparent; border-bottom: 17px solid transparent; content: ""; display: inline-block; position: absolute; right: -1px; } .sidebar-brand { border-bottom: 1px solid rgba(102, 97, 91, 0.3); } .sidebar-brand { padding: 18px 0px; margin: 0 20px; } .navbar .navbar-nav > li > a p { display: inline-block; margin: 0; } p { font-size: 16px; line-height: 1.4em; } btn-menu { border-radius: 3px; padding: 4px 12px; margin: 14px 5px 5px 20px; font-size: 14px; float: left; } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
$(function(){ $(".btn-toggle-menu").click(function() { $("#wrapper").toggleClass("toggled"); }); })