Nested Drop Down Menu Plugin For jQuery - CeNav
File Size: | 4.22 KB |
---|---|
Views Total: | 3380 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
CeNav is a lightweight and simple-to-use jQuery plugin for create a nice-looking multi-level dropdown menu from nested HTML unordered lists.
How to use it:
1. Create nested html lists for the dropdown navigation.
<header> <nav> <ul class="top-level"> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Categories <span></span></a> <ul class="sub-menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2 <span></span></a> <ul class="sub-menu"> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header>
2. Style the nav menu in the CSS.
header { background: rgba(0, 0, 0, .5); height: 60px; padding: 15px; } ul { list-style-type: none; } li { position: relative; } ul.top-level > li { float: left; } ul.top-level > li a { padding: 0 10px; line-height: 30px; display: block; } a { display: block; text-decoration: none; color: rgba(0, 0, 0, .75); } span { float: right; margin-left: 5px; width: 30px; height: 30px; line-height: 30px; text-align: center; background: rgba(0, 0, 0, .1); transition: .2s linear transform; } span:before { content: "\f107"; font-family: FontAwesome; font-size: 14px; } ul.sub-menu { position: absolute; top: 45px; left: 0; width: 200px; background: rgba(0, 0, 0, .5); padding: 5px; border-bottom: 5px solid rgba(0, 0, 0, .75); display: none; } ul.sub-menu li a { display: block; padding: 5px 10px; } ul.sub-menu li a span { transform: rotate(-90deg); } ul.sub-menu li a span.close { transform: rotate(90deg); } ul.sub-menu li ul.sub-menu { position: absolute; top: 0; left: 195px; }
3. The ESSENTIAL CSS styles for the nav menu.
span.close { transform: rotate(180deg); } ul.active { display: block; }
4. Load jQuery library and the jQuery CeNav plugin's script at the end of the document.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="jquery.plugin.cenav.1.0.js"></script>
5. Initialize the plugin and done.
$('ul.top-level span').cenav();
This awesome jQuery plugin is developed by buddycore. For more Advanced Usages, please check the demo page or visit the official website.