
This is a small, handy jQuery navigation plugin for creating a mobile-friendly off-canvas side menu on your responsive, cross-platform web page. Smooth menu slide in and slide out animations based on CSS3 transitions and transforms.
1. Create the off-canvas side menu as these:
<section id="offcanvas"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </nav> </section>
2. Style the off-canvas menu and make it hidden on page load.
#offcanvas { display: none; position: fixed; top: 0; height: 100vh; background: #888; box-shadow: 0 0 15px #000 inset; } #offcanvas a { color: #FFF; display: block; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 15px; }
3. Create a trigger element to toggle the off-canvas menu when needed.
<button id="trigger">trigger menu</button>
4. Import the latest version of jQuery library and the Mobile Offcanvas Menu's main script into the document.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="jquery.mobile-offcanvas-menu.js"></script>
5. Activate the off-canvas menu with default settings.
$("#offcanvas").offcanvasmenu();
6. Default settings which can be used to customize the off-canvas menu.
$("#offcanvas").offcanvasmenu({ // trigger element menuTrigger: "trigger", // or 'left' position: "right", // animation speed speed: "0.3", // menu width width: "220px" });
This awesome jQuery plugin is developed by jaynoe. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 27.11.2017
- Source