Sticky Expanding Sidebar Navigation Plugin - jQuery ssMenu
File Size: | 6.68 KB |
---|---|
Views Total: | 2339 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ssMenu is a jQuery plugin for creating a modern sticky expanding sidebar navigation menu on your site.
It adapts perfectly to any layout and gives your website a modern touch. Ideal for dashboard & admin panel design.
How to use it:
1. Load the needed jQuery library and Font Awesome iconic font in your document.
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script>
2. Download and load the ssMenu plugin's files.
<link rel="stylesheet" href="css/ss-menu.css" /> <script src="js/jquery.ss.menu.js"></script>
3. Add menu items to the sidebar navigation.
- Each menu item must have a Font Awesome icon.
- You can add notification badges to menu items using the 'ss-badge' class.
<nav class="ss-menu"> <ul> <li><a href="#1"><i class="fab fa-js"></i> JavaScript</a></li> <li><a href="#1"><span class="ss-badge">6</span> <i class="fab fa-html5"></i> HTML5</a></li> <li><a href="#1"><i class="fab fa-css3"></i> CSS3</a></li> <li><a href="#1"><i class="fab fa-react"></i> React</a></li> <li><a href="#1"><i class="fab fa-angular"></i> Angular</a></li> <li><a href="#1"><i class="fab fa-vuejs"></i> Vue.js</a></li> <li><a href="#1"><i class="fas fa-cogs"></i> Settings</a></li> <li><a href="#1"><i class="fas fa-address-book"></i> Contact</a></li> <li><a href="#1"><i class="fas fa-sign-in-alt"></i> Sign-in</a></li> </ul> </nav>
4. Call the plugin on the top nav element. That's it.
$(function(){ $(".ss-menu").ssMenu(); });
5. Available themes:
- red
- yellow
- blue
- green
- orange
- brown
- teal
- purple
$(function(){ $(".ss-menu").ssMenu({ theme: "red", }); });
5. Determine whether to hide the scrollbar when the navigation is expanded. Default: false.
$(function(){ $(".ss-menu").ssMenu({ hideOnScroll: false, }); });
6. Apply additional CSS styles to the navigation.
$(function(){ $(".ss-menu").ssMenu({ additionalCSS: ({ 'background': '', // background color 'color': '', // text color 'boxShadow': '', // box shadow 'textShadow': '', // text shadow }), }); });
This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.