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:
- red
- yellow
- blue
- green
- orange
- brown
- teal
- 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 }), });
Similar Code Snippets:
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.