Simple Menu Responsive Dengan JQuery

Simple Menu Responsive Dengan JQuery

Bola Hero Gawai

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/

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Amankan Pertamax dulu Kang Adhy :D

Balas

Mantap info nya mas... ijin nyimak deh

Balas

Wahh postingannya sekarang mengenai Responsive terus Kang Adhy :D

Keren Kang Menunya :), saya coba dulu Kang :D

Balas

simpel, elegan, responsive, keren, markotop, yahud, maknyos, naon deui nya? :D

bagus banget kang, tapi kodenya ko wow banget ya hehe

Balas

Iya mas eheheh terbawa suasana =D

Balas

Silahkan mas Munawir ;)

Balas

heehehe tos bisi seepeun nu sanes kang =D
Tapi dengan ini kita tidak perlu mengatur kode css untuk tiap ukuran devicenya kang =D sudah diatur dengan javascriptnya.

Balas

Keren ning euy mas. Tapi diterapkeunna lain kali saja, kalau sudah bosan dengan tampilan menu yang lama :D

Balas

kebeulan banget, saya sedang meresponsive blog saya. tapi lagi bingung, gak tau menunya mo ditaruh dimana. mungkin tips dari bang adhy bisa digunakan...
trima kasih bang... :-d

Balas

Bagus kang tampilan menuna :) tapi da tos kagok ie bawaan template na / menu na tos responsive dan sae :D

Balas

Selamat Siang Kang Adhy...
Menu yang bisa buat modal template saya ramah dalam setiap device nya nih Kang
Berarti jika kita memakai ini, tetapkita harus sesuaikan link labe agar sesuai
Dengan halaman blog kita dan pas dengan Device nya yah Kang Adhy :)

Balas

Hahhaha Puntun na seepeyn ku Mas Intan hh :-?
Tapi yang jelas menu Responsive jquery ini lebih bermanfaat
Buat sobat yang membutuhkanya yah Kang. terima kasih
Sudah berbagi sesuatu yang bisa di gunakan oleh orang lain

Balas

Iya kang kapan-kapan juga ga apa2 :D

Balas

Silahkan dicoba aja bung :D

Balas

Muhun kang pami tos sae mah engeng digentos bilih janten ribet engkena =D

Balas

Muhun kang ramah ka berbagai device :D

Balas

keren kang adhy.. makin cakep menunya :D

Balas

Wah ada efek nya .. ini keren sekali :)

Balas

saya amankan dulu mas...!

Balas

bagus mas.. halus..

Balas

Kapan-kapan kudu di jajal nih, saya masih belum puas dengan tampilan mobile blog saya kang, saya bukmak dulu kang, biar gk nyasar kemana-mana :D

Balas

Bungkus dulu kang!lihat demo nya jadi tertarik nh!

Balas

Lumayan mas :p

Balas

Iya efeknya lumayn halus =D

Balas

Silahkan mas =D

Balas

Hehehehe Lumayan mbak :D

Balas

Hehehehe silahkan :D

Balas

Silahkan kang :D

Balas

Keren sekali Mas ... :)

Balas

itu semua kode ( css , html, javascript ) di copy semua ya om, maaf belum paham yang beginian.

Balas

sayang gak bisa dibikin sub menu :(

makasih kang kebetulan lagi nyari yang beginian :D

Balas

Satu kata kang " Mantapzzzz "

Balas

Hehehehe makasih mas =D

Balas

Iya mas, kode CSS simpen di atas skin, javascript di atas head dan html simpan di mana kita ingn menampilkan menunya :D

Balas

Iya mas belum bisa pakai sub menu :D

Balas

Makasiihhhh kang :D

Balas

dua hari tidak mampir.. eh.. berubah lagi.. :) keren..

Balas

bang javascriptnya gak konek dengan template saya. Pesannya kayak gini :
"Kesalahan saat mengurai XML, baris 2293, kolom 149: The entity "nbsp" was referenced, but not declared."

mohon solusinya bang..! @@,

Balas

Simpan javascriptnya seperti ini
<script type='text/javascript'>
//<![CDATA[

JAVASCRIPT DI SINI

//]]>
</script>

Balas

oh iya...
hampir lupa |o|

Balas

siap lakasanakan ke TKP. makasih om.

Balas

ouya kang tadi baru aja browsing terus dapet ini :D

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

bisa minta tolong bikinin yang lebih dimengerti gak bahasanya kang hehehe :D

Balas

Nanti akan saya coba :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×