Membuat Menu Header Responsive Pure CSS With Translate

Membuat Menu Header Responsive Pure CSS With Translate

Bola Hero Gawai

Membuat Menu Header Responsive Pure CSS With Translate

Menu Header Responsive Pure CSS With Translate
Masih banyak fitur-fitur dari template Maskolis yang belum dishare cara membuatnya oleh Maskolis. Salah satunya yaitu menu header responsive yang selalu Maskolis gunakan untuk template-template responsivenya. Menu responsive ini tidak meggunakan javascript, jadi hanya menggunakan CSS sehingga keberadaannya tidak menambah beban blog.

Untuk itu kini saya share cara membuat menu header responsive ini dengan sedikit modifikasi agar tampilannya sesuai dengan menu header Kompi Ajaib sebelumnya dan ditambah translator untuk bahasa Inggris. Menu header responsive ini saya pakai juga di blog ini.


Bagi yang tertarik untuk mencobanya silahkan copy kode-kodenya di bawah ini.

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}

Kemudian tambahkan juga kode CSS responsive di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>. Jika di blog Anda sudah ada CSS responsivenya silahkan tambahkan saja pada CSS responsive yang sudah ada.

@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

Terakhir silahkan gunakan kode pemanggilnya di bawah ini.

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Silahkan ganti tanda "/" atau "#" dengan url tujuan menu. Dan untuk warna menunya silahkan sesuaikan dengan tema blog Anda dengan memodifikasi warnanya pada kode CSS-nya.

Selamat mencoba....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

64 Comments Add Comment

Pertamax dulu ya kang :)
izin mencoba di : http://game-begog.blogspot.com

Balas

keren mas, itu fixed gak? kl gak, cara biar jadi fixed menu nya gimana caranya ya mas? thanks

Balas

Hehehehe :D
Silahkan mas :D

Balas

Seperti kata kang Ismet hhehehehe :D Tinggal tambah position:fixed;top:0;z-index:999; pada CSS paling atas.

Balas

Beuhhh mancap kang .. kata kng ismet mah keyeeeeennnnn lah

Balas

ok mas, disimpan dulu kode nya.. nanti sy aplikasikan, makasih :)

Balas

Mas kalau menunya Yang lama di (yang tidak responsive) lalu akan di jadikan responsive gimana ya mas .. apa ada tutorialnya ? :)

Balas

Heheehe muhun kang...pas dicobi ternyata hasilna cukup memuaskan :D

Balas

Tutorialnya akan susah karena pasti kode menunya berbeda-beda. Paling coba cari kode menu responsive yang sesuai dengan selera kita kemudian susunan kode menu lama coba disamakan dengan kode menu responsivenya. Tapi itu akan lumayan susah. Yang gampang coba cari kode menu responsive kemudian modif tampilannya agar sama dengan menu sebelumnya.

Balas

wah,, lumayan ribet ya mas, apalagi harus membongkar ulang.. takut

Balas

wuihh baru lagi kang,,, :)

Balas

Kalau ragu-ragu jangan nanti malah jadi berantakan hehehehe :D

Balas

Hehehehe masih takutan sama kodi ya daripada sama kunti hehehe :D

Balas

Hehehehe ceritanya begitu :D Tapi sebenarnya ini sudah lama ada di template Maskolis...

Balas

navigasi template blog sy udh responsive cuman gk sebagus ini,, sy mau replace dengan ini tapi nanti kalau ada kesalahan bisa bantu ya kang :D #masihTAkut

Balas

iya mas, kemarin saya bongkar, eh malah responsive nya jadi berantakan, kalau kodi responsive saya mas kurang paham banget, kalau kuntilanak saya masih ga begitu takut mas, parasnya cuman itu2 aja heheheheh... :) :-bd tapi kalqau ketemu dijamin pingsan @@,

Balas

Wah hebat.... keren nich kang. Kebetulan saya lagi edit template.cocok bgt neh,,, :)

Balas

Mangga dicobian kang hehehee... :D

Balas

Mau dicoba dulu ah, tapi harus edit-edit lagi ..
terimakasih kang.

Perubahan pada footernya keren kang jadi makin enak aja:D

Balas

Silahkan dikutak-katik lagi biar makin keren hehehehe :D
Teliti juga mas Firman hehehe.... makasih atas perhatiannya....

Balas

Script nya saya simpan dulu kang,kapan2 bisa coba di pasang.trims

Balas

Saya pernah pakai yang ini om adhy, kalau tidak salah saya ambil di templatenya Kang Ismet dan Pakdhe Johny, tetapi saya copot lagi, soalnya, menu Navigasinya gak bisa dibuka Via mobile Opera Mini, tetapi saya tidak tahu dengan yang lain, apakah mengalami hal yang sama dengan saya.

Balas

Mangga kang hehehe :D

Balas

Memang opera mini mobile seperti itu, jangankan menu ini... scroll aja tidak ngepek di opera mobile :) Saya juga sama seperti itu, mau coba pakai browser lainnya di hp saya juga.

Balas

Senengnya kalau bisa edit-edit template sendiri :)

Balas

Iya mas biar pun hasilnya sederhana tapi kalau hasil sendiri rasanya lebih puas :D

Balas

kadang2 responsiv bikin lieur :)

Balas

Muhun kang kaasikan ngamodif jadi hilap responsive na hehehehe jadi weh lieur deui..

Balas

kang punten, sekedar masukan.. jumlah komentar yang di homepage atau di postingan, hashtagnya kan ke #comment-form.. ga work kang, gimana kalau diganti ke #threaded-comment-form
punten ngalalangkungan nu gaduh blog ah.. :)

Balas

Muhun kang abdi teh pakai ini expr:href='data:post.addCommentUrl' punten gaduh url nu cocok kang kanggo threded comment hack?

Balas

abdi mah diakalina dina htmlna kang

<div class='comment-form'>


ditambih id janten

<div class='comment-form' id='comment-form'>

Balas

Kang moal bentrok sareng kode nu ieu

<b:includable id='comment-form' var='post'>

Balas

bentrok mah riungkeun we di kantor desa... hehehe aman nya kang :-d

Balas

Mantep Sekali,ijin nyimak ya^_^

Balas

bentrok maslah blsm eta mh atuh kang heuheu

Balas
This comment has been removed by the author.

Keren kang,, padahal bnyk yg nawarin make javascript. Tapi iniii,,, hanya gunain css doangg,,, wahh mantap dahh... :-d

Balas

Simple mas,..
Saya suka dengan menu responsive dari Maskolis ini :D

Balas

wah boleh dicoba nih mas :D

Balas

Iya saya juga nemunya kebanyakan pakai javascript :D

Balas

Iya mas silahkan dicoba :D

Balas

Iya mas mantap :D

Balas

Iya boleh mas Nandar :D

Balas

oya kang, kok menu ini trkdang2 sudah utk di klik ya wktu buka lewat hp. Saya gk tau, apa saya sndiri yg ngalamin atau yg lain jga mrsakan hal yg sama?

Balas

salut sama kreatifitas mas Andi selalu membuat postingan yang memang dibutuhkan dan juga selalu mengutamakan validitas dan responsivitas dari konten-konten yang dibagikan..

Thanks for Kompi Ajaib..

Balas

Pakai Opera ya? Memang opera mini mobile seperti itu, jangankan menu ini... scroll aja tidak ngepek di opera mobile Saya juga sama seperti itu, mau coba pakai browser lainnya di hp saya juga.

Balas

Sama2 mas Imron :D

Balas

gak opera kang, ini browser bawaan bb kang. Nah, saya coba2 klik gk bsa. Tapi prnah sekali menunya bkrja. itupun karna saya refresh berulang kali..

Balas

halo mas, mau tanya nih ?
kenapa ya pas pencarian google descripsi blog saya tidak terindex..
trus sitemap nya judul saya sama linknya beda.. judulnya nandarious goes to dotcom tapi linknya http://www.nandarious.com/?m=0..

itu kenapa ya mas ?
[img] http://2.bp.blogspot.com/-e_UOlTQW2Dw/UmVDLHsSkFI/AAAAAAAACMs/b6EZ8oVF2mI/s320/download.png [img]

Balas

mas ahdy, kok http://kompiside.blogspot.com/ dihapus sih?

Balas

Salam Kang Adhy, ijin simak artikel nya, sangat bermanfaat nih Kang
Buat saya tentang menu header responsive, terima kasih atas artikel nya

Balas

master responsiv euy, lieur urang mah...rek respon rek hanteu, ngeblog weh lah :D

Balas

wajib ditanam nih .. gali terus HTML nya .. biar lebih alami di TKP nya ya kang :D.. lesponsip beudd.. hehehe

Balas

mas kompi tolong dong di editkan navbar ini jadi pure juga seperti navbar blog nya terselubung, ini css nya mas https://app.box.com/s/k0zf6xmy5e9to4ibme5u. saya ingin memasang nya di template maskolis yang jhony genit seperti ini http://radjashare.blogspot.com. makasih ya mas di tunggu navbar editan nya di radjashare@gmail.com

Balas

tapi header bisa jadi footer ya mas (y), itu terjadi di http://defantri.blogspot.com/
terimakasih idenya dan sukses untuk kompi :-d

Balas

Malam kang, nanya ini. Kalo saya pake ini untuk menubar yang lama otomatis hilang?

Balas

Alhamdulillah udah berhasil Kang :-bd

Balas

Kang, boleh tanya, agar menu header seperti punya akang, kira-kira tutorialnya seperti apa????? Terimakasih.

Balas

mas bagaimana membuat translatenya dari english ke indonesia? soalnya blog saya blog english

Balas

Mantap, Kang Adhy Suryadi memang joss.. Postingannya sangat bermanfaat, ceritanya tadi cari-cari muter dan akhirnya nemu ini, kok sesuai sama yang dicari, jadi sekalian saya coba terapin dan manjur pisan, makasih kang :-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!

×
×
×