Responsive Website Design: Make Your Old Menu / navigation Responsive

Make Your Old Menu / navigation Responsive

This jquery File Make your Old Menu Responsive either your menu is simple or multidropdown

Just add these Files

Create menu.js

;(function (jQuery, document, window) {
	var
	// default settings object.
	defaults = {
		label: 'MENU',
		duplicate: true,
		duration: 200,
		easingOpen: 'swing',
		easingClose: 'swing',
		closedSymbol: '►',
		openedSymbol: '▼',
		prependTo: 'body',
		parentTag: 'a',
		closeOnClick: false,
		allowParentLinks: false,
		init: function(){},
		open: function(){},
		close: function(){}
	},
	mobileMenu = 'slicknav',
	prefix = 'slicknav';
	
	function Plugin( element, options ) {
		this.element = element;

// jQuery has an extend method which merges the contents of two or
 // more objects, storing the result in the first object. The first object
 // is generally empty as we don't want to alter the default options for
 // future instances of the plugin
 this.settings = jQuery.extend( {}, defaults, options) ;
 
 this._defaults = defaults;
 this._name = mobileMenu;
 
 this.init();
	}
	
	Plugin.prototype.init = function () {
 var jQuerythis = this;
		var menu = jQuery(this.element);
		var settings = this.settings;
		
		// clone menu if needed
		if (settings.duplicate) {
			jQuerythis.mobileNav = menu.clone();
			//remove ids from clone to prevent css issues
			jQuerythis.mobileNav.removeAttr('id');
			jQuerythis.mobileNav.find('*').each(function(i,e){
				jQuery(e).removeAttr('id');
			});
		}
		else
			jQuerythis.mobileNav = menu;
		
		// styling class for the button
		var iconClass = prefix+'_icon';
		
		if (settings.label == '') {
			iconClass += ' '+prefix+'_no-text';
		}
		
		if (settings.parentTag == 'a') {
			settings.parentTag = 'a href="#"';
		}
		
		// create menu bar
		jQuerythis.mobileNav.attr('class', prefix+'_nav');
		var menuBar = jQuery('<div class="'+prefix+'_menu hidden-lg"></div>');
		jQuerythis.btn = jQuery('<'+settings.parentTag+' aria-haspopup="true" tabindex="0" class="'+prefix+'_btn '+prefix+'_collapsed">'+settings.label+'</a>');
		jQuery(menuBar).append(jQuerythis.btn);		
		jQuery(settings.prependTo).prepend(menuBar);
		menuBar.append(jQuerythis.mobileNav);
		
		// iterate over structure adding additional structure
		var items = jQuerythis.mobileNav.find('li');
		jQuery(items).each(function () {
			var item = jQuery(this);
			data = {};
			data.children = item.children('ul').attr('role','menu');
			item.data("menu", data);
			
			// if a list item has a nested menu
			if (data.children.length > 0) {
			
				// select all text before the child menu
				var a = item.contents();
				var nodes = [];
				jQuery(a).each(function(){
					if(!jQuery(this).is("ul")) {
						nodes.push(this);
					}
					else {
						return false;
					}
				});
				
				// wrap item text with tag and add classes
				var wrap = jQuery(nodes).wrapAll('<'+settings.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+prefix+'_item"/>').parent();
				
				item.addClass(prefix+'_collapsed');
				item.addClass(prefix+'_parent');
				
				// create parent arrow
				jQuery(nodes).last().after(''+settings.closedSymbol+'');
				
			
			} else if ( item.children().length == 0) {
				 item.addClass(prefix+'_txtnode');
			}
			
			// accessibility for links
			item.children('a').attr('role', 'menuitem').click(function(){
				//Emulate menu close if set
				if (settings.closeOnClick)
					jQuery(jQuerythis.btn).click();
			});
		});
		
		// structure is in place, now hide appropriate items
		jQuery(items).each(function () {
			var data = jQuery(this).data("menu");
			jQuerythis._visibilityToggle(data.children, false, null, true);
		});
		
		// finally toggle entire menu
		jQuerythis._visibilityToggle(jQuerythis.mobileNav, false, 'init', true);
		
		// accessibility for menu button
		jQuerythis.mobileNav.attr('role','menu');
		
		// outline prevention when using mouse
		jQuery(document).mousedown(function(){
			jQuerythis._outlines(false);
		});
		
		jQuery(document).keyup(function(){
			jQuerythis._outlines(true);
		});
		
		// menu button click
		jQuery(jQuerythis.btn).click(function (e) {
			e.preventDefault();
			jQuerythis._menuToggle();			
		});
		
		// click on menu parent
		jQuerythis.mobileNav.on('click', '.'+prefix+'_item', function(e){
			e.preventDefault();
			jQuerythis._itemClick(jQuery(this));
		});
		
		// check for enter key on menu button and menu parents
		jQuery(jQuerythis.btn).keydown(function (e) {
			var ev = e || event;
			if(ev.keyCode == 13) {
				e.preventDefault();
				jQuerythis._menuToggle();
			}
		});
		
		jQuerythis.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
			var ev = e || event;
			if(ev.keyCode == 13) {
				e.preventDefault();
				jQuerythis._itemClick(jQuery(e.target));
			}
		});
		
		// allow links clickable within parent tags if set
		if (settings.allowParentLinks) {
			jQuery('.'+prefix+'_item a').click(function(e){
					e.stopImmediatePropagation();
			});
		}
 };
	
	//toggle menu
	Plugin.prototype._menuToggle = function(el){
		var jQuerythis = this;
		var btn = jQuerythis.btn;
		var mobileNav = jQuerythis.mobileNav;
		
		if (btn.hasClass(prefix+'_collapsed')) {
			btn.removeClass(prefix+'_collapsed');
			btn.addClass(prefix+'_open');
		} else {
			btn.removeClass(prefix+'_open');
			btn.addClass(prefix+'_collapsed');
		}
		btn.addClass(prefix+'_animating');
		jQuerythis._visibilityToggle(mobileNav, true, btn);
	}
	
	// toggle clicked items
	Plugin.prototype._itemClick = function(el) {
		var jQuerythis = this;
		var settings = jQuerythis.settings;
		var data = el.data("menu");
		if (!data) {
			data = {};
			data.arrow = el.children('.'+prefix+'_arrow');
			data.ul = el.next('ul');
			data.parent = el.parent();
			el.data("menu", data);
		}
		if (data.parent.hasClass(prefix+'_collapsed')) {
			data.arrow.html(settings.openedSymbol);
			data.parent.removeClass(prefix+'_collapsed');
			data.parent.addClass(prefix+'_open');
			data.parent.addClass(prefix+'_animating');
			jQuerythis._visibilityToggle(data.ul, true, el);
		} else {
			data.arrow.html(settings.closedSymbol);
			data.parent.addClass(prefix+'_collapsed');
			data.parent.removeClass(prefix+'_open');
			data.parent.addClass(prefix+'_animating');
			jQuerythis._visibilityToggle(data.ul, true, el);
		}
	}

// toggle actual visibility and accessibility tags
	Plugin.prototype._visibilityToggle = function(el, animate, trigger, init) {
		var jQuerythis = this;
		var settings = jQuerythis.settings;
		var items = jQuerythis._getActionItems(el);
		var duration = 0;
		if (animate)
			duration = settings.duration;
		
		if (el.hasClass(prefix+'_hidden')) {
			el.removeClass(prefix+'_hidden');
			el.slideDown(duration, settings.easingOpen, function(){
				
				jQuery(trigger).removeClass(prefix+'_animating');
				jQuery(trigger).parent().removeClass(prefix+'_animating');
				
				//Fire open callback
				if (!init) {
					settings.open(trigger);
				}
			});
			el.attr('aria-hidden','false');
			items.attr('tabindex', '0');
			jQuerythis._setVisAttr(el, false);
		} else {
			el.addClass(prefix+'_hidden');
			el.slideUp(duration, this.settings.easingClose, function() {
				el.attr('aria-hidden','true');
				items.attr('tabindex', '-1');
				jQuerythis._setVisAttr(el, true);
				el.hide(); //jQuery 1.7 bug fix
				
				jQuery(trigger).removeClass(prefix+'_animating');
				jQuery(trigger).parent().removeClass(prefix+'_animating');
				
				//Fire init or close callback
				if (!init)
					settings.close(trigger);
				else if (trigger == 'init')
					settings.init();
			});
		}
	}

// set attributes of element and children based on visibility
	Plugin.prototype._setVisAttr = function(el, hidden) {
		var jQuerythis = this;
		
		// select all parents that aren't hidden
		var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
		
		// iterate over all items setting appropriate tags
		if (!hidden) {
			nonHidden.each(function(){
				var ul = jQuery(this);
				ul.attr('aria-hidden','false');
				var items = jQuerythis._getActionItems(ul);
				items.attr('tabindex', '0');
				jQuerythis._setVisAttr(ul, hidden);
			});
		} else {
			nonHidden.each(function(){
				var ul = jQuery(this);
				ul.attr('aria-hidden','true');
				var items = jQuerythis._getActionItems(ul);
				items.attr('tabindex', '-1');
				jQuerythis._setVisAttr(ul, hidden);
			});
		}
	}

// get all 1st level items that are clickable
	Plugin.prototype._getActionItems = function(el) {
		var data = el.data("menu");
		if (!data) {
			data = {};
			var items = el.children('li');
			var anchors = items.children('a');
			data.links = anchors.add(items.children('.'+prefix+'_item'));
			el.data("menu", data);
		}
		return data.links;
	}

Plugin.prototype._outlines = function(state) {
		if (!state) {
			jQuery('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
		} else {
			jQuery('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
		}
	}
	
	Plugin.prototype.toggle = function(){
		jQuerythis._menuToggle();
	}
	
	Plugin.prototype.open = function(){
		jQuerythis = this;
		if (jQuerythis.btn.hasClass(prefix+'_collapsed')) {
			jQuerythis._menuToggle();
		}
	}
	
	Plugin.prototype.close = function(){
		jQuerythis = this;
		if (jQuerythis.btn.hasClass(prefix+'_open')) {
			jQuerythis._menuToggle();
		}
	}
	
	jQuery.fn[mobileMenu] = function ( options ) {
		var args = arguments;

// Is the first parameter an object (options), or was omitted, instantiate a new instance
		if (options === undefined || typeof options === 'object') {
			return this.each(function () {

// Only allow the plugin to be instantiated once due to methods
				if (!jQuery.data(this, 'plugin_' + mobileMenu)) {

// if it has no instance, create a new one, pass options to our plugin constructor,
					// and store the plugin instance in the elements jQuery data object.
					jQuery.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
				}
			});

// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
		} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {

// Cache the method call to make it possible to return a value
			var returns;

this.each(function () {
				var instance = jQuery.data(this, 'plugin_' + mobileMenu);

// Tests that there's already a plugin-instance and checks that the requested public method exists
				if (instance instanceof Plugin && typeof instance[options] === 'function') {

// Call the method of our plugin instance, and pass it the supplied arguments.
					returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
				}
			});

// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
			return returns !== undefined ? returns : this;
		}
	};
}(jQuery, document, window));

// Mobile Menu
    $(function(){
        $('#mymenustyle').slicknav();
    });

$(window).load(function(){
  $("#mymenu").sticky({ topSpacing: 65 });
});
$(window).load(function(){
  $("#header").sticky({ topSpacing: -20 });
});

Create main_style.css

@charset "utf-8";
#mymenu {
background:#eee;
}
#mymenu ul {
  padding: 0 10px 0;
}
#mymenu ul > li {
  margin: 0px 5px;
}
#mymenu ul > li > a,
#mymenu ul > li > span {
  color: #747474;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0;
  padding: 12px 10px 12px;
  border-radius: 0px;
  display: block;
}
#mymenu ul > li > a:hover,
#mymenu ul > li > span:hover,
#mymenu ul > li > a:active,
#mymenu ul > li > span:active,
#mymenu ul > li > a.current,
#mymenu ul > li > span.current {
  background: none;
}
/* Dropdown Menu */
#mymenu ul ul {
  background: #f2f2f2;
  border-radius: 5px;
  border: 1px solid #dddddd;
  position: relative;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  display: block;
  list-style: none;
  margin: 0px;
  padding: 5px 0 !important;
  min-width: 200px;
  z-index: 20;
}
#mymenu ul ul li {
  min-height: 22px;
  float: none;
  position: relative;
  margin: 0;
}
#mymenu ul ul li a,
#mymenu ul ul li span {
  background-color: transparent;
  box-shadow: none;
  display: block;
  padding: 6px 15px;
  color: #555555 !important;
  text-transform: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
#mymenu ul ul:before {
  background: transparent url('../img/menu_arrow.png') no-repeat 0 0;
  content: "";
  display: block;
  height: 10px;
  left: 26px;
  position: absolute;
  top: -10px;
  width: 14px;
}
#mymenu ul ul li:first-child a {
  border: none;
}
#mymenu ul ul li a:active,
#mymenu ul ul li a:focus,
#mymenu ul ul li a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.05);
}
#mymenu ul ul li:hover a {
  text-decoration: none;
}
#mymenu ul ul ul:before {
  display: none;
}
#mymenu li ul,
#mymenu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 240ms linear;
  -o-transition: all 240ms linear;
  -ms-transition: all 240ms linear;
  -moz-transition: all 240ms linear;
  -webkit-transition: all 240ms linear;
  top: 70px;
  z-index: 1000;
}
#mymenu li:hover > ul,
#mymenu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  top: 50px;
}
#mymenu li ul li ul {
  left: 220px;
  top: 0;
}
#mymenu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}
#mymenu ul ul .parent:after {
  top: 10px;
  right: 15px;
  color: #777;
  font-size: 14px;
  content: "\f105";
  position: absolute;
  font-weight: normal;
  display: inline-block;
  font-family: FontAwesome;
}

/*-----------------------------------------------------------------------------------*/
/* Mobile Menu */
/*-----------------------------------------------------------------------------------*/
.slicknav_btn {
  position: relative;
  display: block;
  vertical-align: middle;
  float: right;
  padding: 0.5em 0.7em;
  line-height: 1.125em;
  cursor: pointer;
}
.slicknav_menu .slicknav_menutxt {
  display: block;
  line-height: 1.188em;
  float: left;
}
.slicknav_menu .slicknav_icon {
  float: left;
  margin: 0.188em 0 0 0.438em;
}
.slicknav_menu .slicknav_no-text {
  margin: 0;
}
.slicknav_menu .slicknav_icon-bar {
  font-size: 18px;
  display: block;
  width: 1.125em;
  height: 0.125em;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
  margin-top: 0.188em;
}
.slicknav_nav {
  clear: both;
}
.slicknav_nav ul,
.slicknav_nav li {
  display: block;
}
.slicknav_nav .slicknav_arrow {
  font-size: 0.8em;
  margin: 0 0 0 0.4em;
}
.slicknav_nav .slicknav_item {
  display: block;
  cursor: pointer;
}
.slicknav_nav a {
  display: block;
}
.slicknav_nav .slicknav_item a {
  display: inline;
}
.slicknav_menu:before,
.slicknav_menu:after {
  content: " ";
  display: table;
}
.slicknav_menu:after {
  clear: both;
}
/* IE6/7 support */
.slicknav_menu {
  *zoom: 1;
}

.slicknav_menu {
  font-size: 18px;
}
/* Button */
.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.4);
}
/* Button Text */
.slicknav_menu .slicknav_menutxt {
  color: #FFF;
  font-weight: bold;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}
.slicknav_menu {
  background: #404f55;
  padding: 5px;
}
.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
}
.slicknav_nav,
.slicknav_nav ul {
  list-style: none;
  overflow: hidden;
}
.slicknav_nav .slicknav_item {
  padding: 14px;
  margin: 2px 0px;
}
.slicknav_nav a {
  padding: 14px;
  margin: 2px 0px;
  text-decoration: none;
  color: #fff;
}
.slicknav_nav ul {
  padding: 0;
  margin: 0;
}
.slicknav_nav li {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  color: #ffffff;
}
.slicknav_nav li li {
  background-color: rgba(255, 255, 255, 0.03);
  text-indent: 10px;
}
.slicknav_nav li li li {
  background-color: rgba(255, 255, 255, 0.03);
  text-indent: 20px;
}
.slicknav_nav li li a {
  color: #ffffff;
}
.slicknav_nav .slicknav_item a {
  padding: 0;
  margin: 0;
}
.slicknav_nav a:hover,
.slicknav_nav .slicknav_item:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff;
}
.slicknav_nav .slicknav_txtnode {
  margin-left: 15px;
}

a.slicknav_item [class^="fa-"]:before,
a.slicknav_item [class*=" fa-"]:before,
.slicknav_menu li [class^="fa-"]:before,
.slicknav_menu li [class*=" fa-"]:before {
  display: none !important;
}
.slicknav_nav ul > li a[class^="fa-"],
.slicknav_nav ul > li a[class*=" fa-"] {
  padding-left: 14px !important;
}
a.slicknav_item [class^="fa-"],
a.slicknav_item [class*=" fa-"] {
  padding-left: 0 !important;
}

/* Top Menu Icons */
#mymenu li [class^="fa-"]:before,
#mymenu li [class*=" fa-"]:before {
  color: rgba(0, 0, 0, 0.2);
  top: 12px;
  left: 12px;
  font-size: 18px;
}

[class^="fa-"]:before,
[class*=" fa-"]:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 10px;
  color: rgba(0, 0, 0, 0.6);
}

Tuesday 29 September 2015

Make Your Old Menu / navigation Responsive

Make Your Old Menu / navigation Responsive

This jquery File Make your Old Menu Responsive either your menu is simple or multidropdown

Just add these Files

Create menu.js

Create main_style.css

No comments:

Post a Comment