<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li> <a href="http://concentra.co.uk">Nav item</a> </li> <li> <a href="http://concentra.co.uk">Nav item</a> </li> <li class="dropdown"> <a href="http://concentra.co.uk">Cats?</a> <ul class="dropdown-submenu" role="menu"> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li class="dropdown"><a href="http://concentra.co.uk">Nav item</a> <ul class="dropdown-submenu" role="menu"> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li><a href="http://concentra.co.uk">Nav item</a> </li> </ul> </li> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li><a href="http://concentra.co.uk">Nav item</a> </li> <img style="width: 100%; height: auto;" class="post_media_photo image" alt="" width="540" height="411" style="width: 540px; height: 411px;" src="https://31.media.tumblr.com/dc35f9de8f91cdf188f5e43ce0a8071c/tumblr_mk2a0jQkOX1qe85oio1_500.gif" data-pin-url="http://architectofmyunbentsoul.tumblr.com/post/45986193800" data-pin-description="Firewhisky & Butterbeer"> </ul> </li> <li> <a href="http://concentra.co.uk">Nav item</a> </li> <li> <a href="http://concentra.co.uk">Nav item</a> </li> <li class="dropdown"> <a href="http://concentra.co.uk">Nav item</a> <ul class="dropdown-submenu" role="menu"> <li><a href="http://concentra.co.uk">Nav item</a> </li> <li class="active"><a href="http://concentra.co.uk">Nav item</a> </li> </ul> </li> </ul> </div> <!-- /#sidebar-wrapper --> <div id="page-content-wrapper"> <p>Click the arrow to the right of Cats :P</p> </div> </div>

/* SIDENAV ----------------------------------------------------------*/ #wrapper { overflow: scroll; } #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: #003a40; border-right: 4px solid #5cb03b; -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 #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 { background-color: #003a40; } .sidebar-nav li a { display: block; padding: 7px 10px; text-decoration: none; color: #d9e2e3; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav li.active > a { background: #5cb03b; color: #ffffff; } .sidebar-nav li.parent > a { background: #002c31; color: #ffffff; } .sidebar-nav .dropdown li { text-indent: 30px; } .sidebar-nav .dropdown .dropdown-icon { position: absolute; top: 0; right: 4px; z-index: 2000; } .sidebar-nav .dropdown .dropdown-submenu { list-style: none; padding-left: 0; } .sidebar-nav .dropdown .dropdown-submenu li { text-indent: 10px; } .sidebar-nav .dropdown .dropdown-submenu .dropdown-submenu li { text-indent: 20px; } .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: #fff; 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; } }

/* SIDE NAV COLLAPSE TOGGLE =======================*/ $(function () { $('#sidebar-wrapper .dropdown-submenu').hide(); $('#sidebar-wrapper .dropdown').append('<a href="#" class="dropdown-icon"><span class="caret"></span></a>'); $('#sidebar-wrapper .dropdown-icon').click(function () { $(this).closest('.dropdown').find('.dropdown-submenu').first().slideToggle(); }); var active = '#sidebar-wrapper .active'; $(active).parents('.dropdown').addClass('parent'); $('#sidebar-wrapper .active .dropdown-submenu, #sidebar-wrapper .parent .dropdown-submenu').show(); });