Sticky Expanding Sidebar Navigation Plugin - jQuery ssMenu

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.