This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.
See a live DEMO.
To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/* Side Menu */ #sidebar-wrapper { z-index: 1000; position: fixed; right: 0; width: 250px; height: 100%; transform: translateX(250px); overflow-y: auto; background: #3e4f5c; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .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: #999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav > .sidebar-brand { height: 55px; font-size: 18px; line-height: 55px; } .sidebar-nav > .sidebar-brand a { color: #999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #menu-toggle { z-index: 1; position: fixed; top: 0; right: 0; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .toggle { margin: 5px 5px 0 0; } .square { padding: 8px; display: block; margin:12px; } .wl a { color: #91a9cf; } |
1 2 3 4 5 6 7 8 9 10 |
// Close menu $("#close-menu").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); // Open menu $("#menu-toggle").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="wl"> <a id="menu-toggle" href="#" class="toggle square"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></a> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="close-menu" href="#" class="pull-right toggle square"><i class="fa fa-times fa-lg"></i></a> <li class="sidebar-brand"> <a href="#top" onclick=$("#close-menu").click();>Menu title</a> </li> <li> <a href="#about" onclick=$("#close-menu").click();>About Us</a> </li> <li> <a href="#services" onclick=$("#close-menu").click();>Services</a> </li> <li> <a href="#gallery" onclick=$("#close-menu").click();>Gallery</a> </li> <li> <a href="#contact" onclick=$("#close-menu").click();>Contact</a> </li> </ul> </nav> </div> |
See a live DEMO.