jQuery Plugins › jQuery Menu Plugins ›

Simple and Touch-Enabled Responsive Navigation Menu Plugin

File Size: 79KB
Views Total: 12643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE7+, FireFox, Opera, Safari#Responsive#side menu#Navigation
Simple and Touch-Enabled Responsive Navigation Menu Plugin

A simple and Touch Enabled js library that allows you to quickly create a variety of responsive navigation menus by using only CSS and javascript.

See also:

How to use it:

1. Include required CSS file on your page

<link rel="stylesheet" href="responsive-nav.css">

2. Include responsive-nav.js on your page

<script src="responsive-nav.js"></script>

3. Markup

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>

4. CSS for this example

#nav, #nav * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#nav, #nav ul {
list-style: none;
width: 100%;
float: left;
}
#nav li {
float: left;
width: 100%;
}
 @media screen and (min-width: 40em) {
#nav li {
width: 25%;
 *width: 24.9%; /* IE7 Hack */
_width: 19%; /* IE6 Hack */
}
}
#nav a {
color: #fff;
text-decoration: none;
width: 100%;
background: #f4421a;
border-bottom: 1px solid white;
padding: 0.7em 1em;
float: left;
}
 @media screen and (min-width: 40em) {
#nav a {
margin: 0;
padding: 1em;
float: left;
text-align: center;
border-bottom: 0;
border-right: 1px solid white;
}
}
#nav ul ul a {
background: #ca3716;
padding-left: 2em;
}
 @media screen and (min-width: 40em) {
#nav ul ul a {
display: none;
}
}
#nav-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 70px;
height: 55px;
float: right;
text-indent: -9999px;
overflow: hidden;
background: #f4421a url("hamburger.gif") no-repeat 50% 33%;
}
 @media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
 #nav-toggle {
 background-image: url("hamburger-retina.gif");
 -webkit-background-size: 100px 100px;
 -moz-background-size: 100px 100px;
 -o-background-size: 100px 100px;
 background-size: 100px 100px;
}
}

5. The javascript

<script>
      var navigation = responsiveNav("#nav", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 400,      // Integer: Speed of the transition, in milliseconds
        label: "Menu",        // String: Label for the navigation toggle
        insert: "after",      // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
</script>

See also:

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.