Simple Sajian Responsive Dengan Jquery

Seiring dengan semakin berkembangnya responsive web kini ini, salah satu elemen web atau blog yang memerlukan sentuhan responsive yakni menu. 

Menu yang akan aku share kali ini yakni sebuah sajian kreasi Sergio Vitov dari ResponsiveMobileMenu yang aku sederhanakan semoga gampang diterapkan pada blog dan valid CSS3. Juga aku sedikit merubah tampilannya semoga mempunyai sedikit sentuhan metro dengan warna-warna cerah.

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

DEMO

Pastikan dulu blog Anda sudah mempunyai Jquery dan meta tag query menyerupai isyarat 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 isyarat </head> lalu tambahkan juga isyarat 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 sajian namun aku pikir layak untuk dicoba. Selamat mencoba....

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

Sumber https://www.kompiajaib.com/

Share this post