Multi-Level Sliding Sidebar Navigation with jQuery and CSS3
File Size: | 2.89 KB |
---|---|
Views Total: | 27802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fixed sidebar navigation system which allows you to reveal a full multi-level navigation menu by clicking on the toggle icon. Written in jQuery/CSS/CSS3 and animated with CSS3 transitions.
How to use it:
1. Include the Font Awesome 4 for navigation icons.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
2. Create a sidebar navigation menu with a toggle button and your logo.
<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> Facebook</a></li> <li><a href="#"><i class="fa fa-twitter"></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>
3. The core CSS/CSS3 styles for the sidebar navigation. Add the following CSS snippets into your CSS file.
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; }
4. Include the necessary JQuery library at the end of the document.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
5. The JavaScript to enable the sidebar navigation.
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; });
This awesome jQuery plugin is developed by anon. For more Advanced Usages, please check the demo page or visit the official website.