
A simple, SEO-friendly navigation plugin that converts nested HTML unordered lists into a multi-level, horizontal or vertical dropdown menu using CSS flexbox and a little bit of JavaScript.
1. Load the stylesheet jquery-simple-menu.css
for the basic styling of the dropdown menu.
<link rel="stylesheet" href="dist/jquery-simple-menu.css">
2. Create nested HTML lists for the dropdown menu.
<ul id="example"> <li> <a href="#Menu1">Menu 1</a> <ul class="submenu"> <li><a href="#Menu1-1">Menu 1-1</a></li> <li><a href="#Menu1-2">Menu 1-2</a></li> <li><a href="#Menu1-3">Menu 1-3</a></li> </ul> </li> <li> <a href="#Menu2">Menu 2</a> <ul class="submenu"> <li><a href="#Menu2-1">Menu 2-1</a></li> <li><a href="#Menu2-2">Menu 2-2</a></li> <li><a href="#Menu2-3">Menu 2-3</a></li> </ul> </li> </ul>
3. Load jQuery library and the JavaScript jquery-simple-menu.js
in the html file.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="dist/jquery-simple-menu.js"></script>
4. Attach the function to the top list. That's it.
$('#example').simpleMenu();
5. Generate a vertical dropdown menu instead.
$('#example').simpleMenu({ align: 'vertical' });
6. Revel the sub menu items on hover.
$('#example').simpleMenu({ autoOpen: true });
This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 24.03.2019
- Source