Simple Menu Responsive Dengan JQuery

Simple Menu Responsive
Seiring dengan semakin berkembangnya responsive web sekarang ini, salah satu elemen web atau blog yang memerlukan sentuhan responsive yaitu menu. 

Menu yang akan saya share kali ini yaitu sebuah menu kreasi Sergio Vitov dari ResponsiveMobileMenu yang saya sederhanakan agar mudah diterapkan pada blog dan valid CSS3. Juga saya sedikit merubah tampilannya agar memiliki sedikit sentuhan metro dengan warna-warna cerah.

Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini, untuk merubah warna background-nya agar sesuai dengan tema blog silahkan rubah warna background-nya pada kode CSS-nya.


Pastikan dulu blog Anda sudah memiliki Jquery dan meta tag query seperti kode di bawah ini.


<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js' type='text/javascript'/>
Jika belum silahkan pasang kodenya di atas kode </head> kemudian tambahkan juga kode di bawah ini untuk pengaturan font-nya.


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Kemudian tambahkan kode-kode CSS, Javascript, dan HTML di bawah ini.

Kode CSS


#top-menu{background:#03b9f6;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:#333;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:#333;text-align:left;position:relative;border-bottom:1px solid #0282AC;}
.rmm.sapphire .rmm-toggled-title {position:relative;top:12px;left:15px;font:13px Oswald;color:#333;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:#333;width:20px;}
.rmm.sapphire .rmm-toggled ul li a {display:block;width:100%;background-color:#03b9f6;font:13px Oswald;text-align:center;padding:10px 0px;border-bottom:1px solid #0282AC;border-top:1px solid #81DFFE;text-transform:uppercase;}
.rmm.sapphire .rmm-toggled ul li a:hover {color:#fff;}
.rmm.sapphire .rmm-toggled ul li:first-child a {border-top:1px solid #81DFFE !important;}
.rmm.sapphire .rmm-toggled ul li:last-child a {border-bottom:none;}

Kode JavaSript


function responsiveMobileMenu() { $('.rmm').each(function() { $(this).children('ul').addClass('rmm-main-list'); var $style = $(this).attr('data-menu-style'); if ( typeof $style == 'undefined' || $style == false ) { $(this).addClass('graphite'); } else { $(this).addClass($style); } var $width = 0; $(this).find('ul li').each(function() { $width += $(this).outerWidth(); }); if ($.support.leadingWhitespace) { $(this).css('max-width' , $width*1.05+'px'); } else { $(this).css('width' , $width*1.05+'px'); } }); } function getMobileMenu() { $('.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() { $('.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 { $(this).children('.rmm-main-list').show(0); $(this).children('.rmm-toggled').hide(0); } }); } $(function() { responsiveMobileMenu(); getMobileMenu(); adaptMenu(); $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){ if ( $(this).is(".rmm-closed")) { $(this).find('ul').stop().show(300); $(this).removeClass("rmm-closed"); } else { $(this).find('ul').stop().hide(300); $(this).addClass("rmm-closed"); } }); }); $(window).resize(function() { adaptMenu(); });

Kode 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'>Daftar Isi</a></li>
<li><a href='/' target='_blank' title='More Menu'>More Menu</a></li>
<li><a href='/' target='_blank' title='About'>About</a></li>
<li><a href='/' target='_blank' title='Contact'>Contact</a></li>
<li><a href='/' target='_blank' title='Privacy'>Privacy</a></li>
<li><a href='/' target='_blank' title='Search'>Search</a></li>
</ul>
</div>
</div>

Pada Simple Menu Responsive Dengan JQuery ini belum mendukung untuk sub menu namun saya pikir layak untuk dicoba. Selamat mencoba....

Sumber script: http://responsivemobilemenu.com/en/

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments