Sticky Side Navigation with CSS and jQuery ssMenu

Simple, easy to use and user friendly sticky side navigation menu with jQuery ssMenu plugin. ssMenu jQuery plugin creates a fixed side navbar at left of the window/webpage and collapse menu on hover.

Plugin Overview

Plugin: ssMenu
Author: Asif Mughal
Licence: MIT Licence
Published: February 23, 2019
Official Website: Go to website
Dependencies: jQuery 3.3.1 or Latest version and FontAwesome 4.7.0
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 10 KB

How to Use Sticky Side Navigation:

1. Load the jQuery and Font Awesome into HTML document.

<!--Font Awesome-->
<link href="" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <script src=''></script>

2. Include the ssMenu CSS and JavaScript file into your project.

<!--ssMenu CSS-->
<link rel="stylesheet" href="css/ss-menu.css">

<!--ssMenu JS-->
<script src="js/"></script>  

3. Create HTML structure for ssMenu with the nav element that contains unordered list with your menu links.

<!--Start Side Sticky Menu-->
<nav class="ss-menu ">
      <li><a href="#1"><i class="fa fa-android"></i>  Apps Development</a></li>
      <li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li>
      <li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li>
      <li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li>
      <li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li>
      <li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li>
      <li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li>
      <li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li>
      <li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li>
<!--End Side Sticky Menu-->

4. Initialize ssMenu Plugin in jQuery document ready function.




5. To change the theme, just put the name of theme in the following option.


  theme: "theme-name",



All available themes are as follows:

  1. red
  2. yellow
  3. blue
  4. green
  5. orange
  6. brown
  7. teal
  8. purple

6. To hide navigation on scroll down. default: false

  hideOnScroll: true,


7. To add additional CSS properties into ssMenu, put the CSS values in the following object.

 additionalCSS: ({ 
 'background' : '', //custom background color
	'color' : '', //custom text color 
	'boxShadow' : '', //to add box shadow 
	'textShadow' : '', //to add text shadow 


Be the first to comment

Leave a Reply

Your email address will not be published.


14 − five =

This site uses Akismet to reduce spam. Learn how your comment data is processed.