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="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 
	}), 

});

Be the first to comment

Leave a Reply

Your email address will not be published.


*