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.

How to Use Sticky Side Navigation:

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

<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--jQuery-->
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></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/jquery.ss.menu.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 ">
   <ul>
      <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>
   </ul>
</nav>
<!--End Side Sticky Menu-->

4. Initialize ssMenu Plugin in jQuery document ready function.

$(document).ready(function(){

$(".ss-menu").ssMenu();

});    

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

$(document).ready(function(){

$(".ss-menu").ssMenu({
  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

$(".ss-menu").ssMenu({
  hideOnScroll: true,

});

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

$(".ss-menu").ssMenu({
 additionalCSS: ({ 
 'background' : '', //custom background color
	'color' : '', //custom text color 
	'boxShadow' : '', //to add box shadow 
	'textShadow' : '', //to add text shadow 
	}), 

});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.