Menu Horizontal Responsive

by zerrax

HTML

<div id='top-menu'>
<div class='rmm' data-menu-style = 'sapphire'>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='/' target='_blank' title='Daftar Isi'>History</a></li>
<li><a href='/' target='_blank' title='profie / loose'>Profie / Loose</a></li>
<li><a href='/' target='_blank' title='logout'>logout</a></li>
</ul>
</div>
</div>

CSS

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

#top-menu{background:#23252d;width:100%;margin:0 auto;padding-top:2px;min-height:45px}
.rmm {display:block;position:relative;width:100%;padding:0;margin:0 auto !important;text-align: center;line-height:19px !important;min-height:45px}
.rmm a {color:#fff;text-decoration:none;}
.rmm .rmm-main-list, .rmm .rmm-main-list li {margin:0px;padding:0px;}
.rmm ul {display:block;width:auto !important;margin:0 auto !important;overflow:hidden;list-style:none;}
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {display:none !important;height:0px !important;width:0px !important;}
.rmm .rmm-main-list li {display:inline;padding:0;margin:0px !important;}
.rmm-toggled {display:none;width:100%;position:relative;overflow:hidden;margin:0 auto !important;}
.rmm-button:hover {cursor:pointer;}
.rmm .rmm-toggled ul {display:none;margin:0px !important;padding:0px !important;}
.rmm .rmm-toggled ul li {display:block;margin:0 auto !important;}
.rmm.sapphire .rmm-main-list li a {display:inline-block;padding:10px 14px;margin:0px -3px;font:13px Oswald;background-color:none;text-transform:uppercase;}
.rmm.sapphire .rmm-main-list li a:hover {color:#fff;}
.rmm.sapphire .rmm-toggled {width:100%;background-color:none;min-height:45px;cursor:pointer}
.rmm.sapphire .rmm-toggled-controls {display:block;height:45px;color:#fff;text-align:left;position:relative;border-bottom:1px solid #0282AC;}
.rmm.sapphire .rmm-toggled-title {position:relative;top:12px;left:15px;font:13px;color:#fff;text-transform:uppercase;}
.rmm.sapphire .rmm-button {display:block;position:absolute;right:9px;top:10px;width:20px;padding:0px 7px 0px 7px;}
.rmm.sapphire .rmm-button span {display:block;margin:4px 0px 4px 0px;height:2px;background:#fff;width:20px;}
.rmm.sapphire .rmm-toggled ul li...

JavaScript

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {	
		$('.rmm').each(function() {
			
			
			
			$(this).children('ul').addClass('rmm-main-list');	// mark main menu list
			
			
			var $style = $(this).attr('data-menu-style');	// get menu style
				if ( typeof $style == 'undefined' ||  $style == false )
					{
						$(this).addClass('graphite'); // set graphite style if style is not defined
					}
				else {
						$(this).addClass($style);
					}
					
					
			/* 	width of menu list (non-toggled) */
			
			var $width = 0;
				$(this).find('ul li').each(function() {
					$width += $(this).outerWidth();
				});
				
			// if modern browser
			
			if ($.support.leadingWhitespace) {
				$(this).css('max-width' , $width*1.05+'px');
			}
			// 
			else {
				$(this).css('width' , $width*1.05+'px');
			}
		
	 	});
}
function getMobileMenu() {

	/* 	build toggled dropdown menu list */
	
	$('.rmm').each(function() {	
				var menutitle = $(this).attr("data-menu-title");
				if ( menutitle == "" ) {
					menutitle = "Menu";
				}
				else if ( menutitle == undefined ) {
					menutitle = "Menu";
				}
				var $menulist = $(this).children('.rmm-main-list').html();
				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

		});
}

function adaptMenu() {
	
	/* 	toggle menu on resize */
	
	$('.rmm').each(function() {
			var $width = $(this).css('max-width');
			$width = $width.replace('px', ''); 
			if ( $(this).parent().width() < $width*1.05 ) {
				$(this).children('.rmm-main-list').hide(0);
				$(this).children('.rmm-toggled').show(0);
			}
			else...