Michael Janea

SIDE NAVIGATION (678 downloads)

Side Navigation is a responsive off-canvas navigation menu.

 

Demo

Kindly download the plugin for the demo

 

Directions

  1. Extract the downloaded zip file (mjSideNavigation.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjSideNavigation.css" />
    <style type="text/css">
    #navigation {}
    	#navigation > ul > li {float:left; width:20%;}
    	#navigation > ul > li > a {display:block; text-align:center;}
    	#navigation > ul > li:first-child > a {border-left:none;}
    	#navigation > ul > li:last-child > a {border-right:none;}
    	#navigation ul ul > li:first-child > a {border-top:none;}
    	#navigation ul ul > li:last-child > a {border-bottom:none;}
    	#navigation li {position:relative; list-style:none;}
    	#navigation a {display:block; padding:.5em; background:#24242C; color:#f1f1f1; text-shadow:none; font-size:18px; border-right:1px solid #111; border-left:1px solid #333;}
    	#navigation li:hover > a {text-decoration:none; background:#2f2f2f;}
    	#navigation ul {padding:0; margin:0;}
    	#navigation ul ul {display:none; position:absolute; left:0; top:2.4em; width:200px; z-index:100;}
    	#navigation ul ul a {font-size:14px; border:none; border-bottom:1px solid #111; border-top:1px solid #333;}
    	#navigation ul ul ul {left:190px; top:.8em;}
    </style>
  3. Insert below codes before the </body> tag of your page
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="mjSideNavigation.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('#navigation').mjSideNavigation();
    });
    </script>
  4. Add the below sample HTML to the BODY of your page
    <div id="navigationContainer">
    	<a href="#" class="sideNavTrigger">
    		<img src="icon_menu.png" /> Menu
    	</a>
    	<div id="navigation">
    	    <ul>
    	        <li><a href="#">Menu 1</a>
    	            <ul>
    	                <li><a href="#">Menu 1.1</a></li>
    	                <li><a href="#">Menu 1.2</a>
    	                    <ul>
    	                        <li><a href="#">Menu 1.2.1</a></li>
    	                        <li><a href="#">Menu 1.2.2</a></li>
    	                        <li><a href="#">Menu 1.2.3</a>
    	                            <ul>
    	                                <li><a href="#">Menu 1.2.3.1</a></li>
    	                                <li><a href="#">Menu 1.2.3.2</a></li>
    	                                <li><a href="#">Menu 1.2.3.3</a></li>
    	                                <li><a href="#">Menu 1.2.3.4</a></li>
    	                                <li><a href="#">Menu 1.2.3.5</a></li>
    	                            </ul>
    	                        </li>
    	                        <li><a href="#">Menu 1.2.4</a></li>
    	                        <li><a href="#">Menu 1.2.5</a></li>
    	                    </ul>
    	                </li>
    	                <li><a href="#">Menu 1.3</a></li>
    	                <li><a href="#">Menu 1.4</a></li>
    	                <li><a href="#">Menu 1.5</a></li>
    	            </ul>
    	        </li>
    	        <li><a href="#">Menu 2</a></li>
    	        <li><a href="#">Menu 3</a></li>
    	        <li><a href="#">Menu 4</a></li>
    	        <li><a href="#">Menu 5</a></li>
    	    </ul>
    	</div>
    </div>

 

More Set-up Information

Option Description
plusIconPath

image to be shown when a menu, containing a sub-menu, is collapsed

Default Value: plus.png
minusIconPath

image to be shown when a menu, containing a sub-menu, is expanded

Default Value: minus.png
position

side navigation position, whether left or right part of your page

Default Value: left
Choices: left, right

 

Logs

 

Download Side Navigation + Demo

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.