"Side Navigation"
Bootstrap 3.3.0 Snippet by rpenfold

<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 class="page-container"> <div class="content"> ... MAIN CONTENT GOES HERE ... </div> <div class="sidebar-menu"> <header class="logo"> <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="logo" class="fa fa-html5 fa-5x"></span> <!--<img id="logo" src="" alt="Logo"/>--> </a> </header> <div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div> <div class="menu"> <ul id="menu" > <li id="menu-home" ><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li> <li id="menu-comunicacao" ><a href="#"><i class="fa fa-anchor"></i><span>Category</span><span class="fa fa-angle-double-right" style="float: right"></span></a> <ul id="menu-comunicacao-sub" > <li id="menu-mensagens" style="width: 120px" ><a href="#">Item 1<i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a> <ul id="menu-mensagens-sub" > <li id="menu-mensagens-enviadas" ><a href="#">Item 1.1</a></li> <li id="menu-mensagens-recebidas" ><a href="#">Item 1.2</a></li> <li id="menu-mensagens-nova" ><a href="#">Item 1.3</a></li> </ul> </li> <li id="menu-arquivos" ><a href="#">Item 2</a></li> </ul> </li> <li id="menu-academico" ><a href="#"><i class="fa fa-envelope"></i><span>About</span><span class="fa fa-angle-right" style="float: right"></span></a> <ul id="menu-academico-sub" > <li id="menu-academico-avaliacoes" ><a href="#">Contact us</a></li> <li id="menu-academico-boletim" ><a href="#">About us</a></li> </ul> </li> <li><a href="#"><i class="fa fa-share-alt"></i><span>Share</span><span class="fa fa-angle-right" style="float: right"></span></a> <ul> <li><a href="#"><i class="fa fa-facebook"></i> <a href="http://www.jqueryscript.net/tags.php?/Facebook/">Facebook</a></a></li> <li><a href="#"><i class="fa fa-<a href="http://www.jqueryscript.net/tags.php?/twitter/">twitter</a>"></i> Twitter</a></li> <li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li> </ul> </li> <li><a href="#"><i class="fa fa-history"></i><span>Blog</span></a></li> <li><a href="#"><i class="fa fa-gears"></i><span>Settings</span></a></li> </ul> </div> </div> </div>
html, body { height: 100%; background: #eeeeee; } a, a:hover, a:active { text-decoration: none; } a { color: #008DE7; font-style: italic; font-weight: 700; } a:hover { transition: all 200ms ease-in-out; } .page-container { min-width: 1260px; position: relative; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0px auto; } .page-container.sidebar-collapsed { padding-right: 65px; transition: all 100ms linear; transition-delay: 300ms; } .page-container.sidebar-collapsed-back { padding-right: 280px; transition: all 100ms linear; } .page-container.sidebar-collapsed .sidebar-menu { width: 65px; transition: all 100ms ease-in-out; transition-delay: 300ms; } .page-container.sidebar-collapsed-back .sidebar-menu { width: 280px; transition: all 100ms ease-in-out; } .page-container.sidebar-collapsed .sidebar-icon { transform: rotate(90deg); transition: all 300ms ease-in-out; } .page-container.sidebar-collapsed-back .sidebar-icon { transform: rotate(0deg); transition: all 300ms ease-in-out; } .page-container.sidebar-collapsed .logo { padding: 21px; height: 136px; box-sizing: border-box; transition: all 100ms ease-in-out; transition-delay: 300ms; } .page-container.sidebar-collapsed-back .logo { width: 100%; padding: 21px; height: 136px; box-sizing: border-box; transition: all 100ms ease-in-out; } .page-container.sidebar-collapsed #logo { opacity: 0; transition: all 200ms ease-in-out; } .page-container.sidebar-collapsed-back #logo { opacity: 1; transition: all 200ms ease-in-out; transition-delay: 300ms; } .page-container.sidebar-collapsed #menu span { opacity: 0; transition: all 50ms linear; } .page-container.sidebar-collapsed-back #menu span { opacity: 1; transition: all 200ms linear; transition-delay: 300ms; } .sidebar-menu { position: fixed; float: left; width: 280px; top: 0; right: 0; bottom: 0; background-color: #303641; color: #aaabae; font-family: "Segoe UI"; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); z-index: 1; } #menu { list-style: none; margin: 0; padding: 0; margin-bottom: 20px; } #menu li { position: relative; margin: 0; font-size: 12px; border-bottom: 1px solid rgba(69, 74, 84, 0.7); padding: 0; } #menu li ul { opacity: 0; height: 0px; } #menu li a { font-style: normal; font-weight: 400; position: relative; display: block; padding: 10px 20px; color: #aaabae; white-space: nowrap; z-index: 2; } #menu li a:hover { color: #ffffff; background-color: #333944; transition: color 250ms ease-in-out, background-color 250ms ease-in-out; } #menu li.active > a { background-color: #2b303a; color: #ffffff; } #menu ul li { background-color: #2b303a; } #menu ul { list-style-type: none; margin: 0; padding: 0; } #menu li ul { position: absolute; visibility: hidden; right: 100%; top: -1px; background-color: #2b303a; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.1s linear; border-top: 1px solid rgba(69, 74, 84, 0.7); } #menu li:hover > ul { visibility: visible; opacity: 1; } #menu li li ul { right: 100%; visibility: hidden; top: -1px; opacity: 0; transition: opacity 0.1s linear; } #menu li li:hover ul { visibility: visible; opacity: 1; } #menu .fa { margin-right: 5px; } .logo { width: 100%; padding: 21px; box-sizing: border-box; } .sidebar-icon { position: relative; float: right; margin-top: 32px; border: 1px solid #454a54; text-align: center; line-height: 1; font-size: 18px; padding: 6px 8px; border-radius: 3px; color: #888; background-clip: padding-box; text-shadow: 4px 4px 6px rgba(0,0,0,0.4); } .fa-html5 { color: #fff; margin-left: 50px; }
var toggle = true; $(".sidebar-icon").click(function() { if (toggle){ $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back"); $("#menu span").css({"position":"absolute"}); } else { $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back"); setTimeout(function() { $("#menu span").css({"position":"relative"}); }, 400); } toggle = !toggle; });

Related: See More


Questions / Comments: