Simple Responsive Menu - Pada kesempatan yang lalu saya telah membagikan sebuah menu responsive yang terdapat pada blog ini karena banyaknya permintaan . Lalu saya berfikir kenapa gak sekalian dibagikan kembali menu yang dulu sempet dipake sebelum menjadi sekarang ini karena dengan begitu lengkaplah kebaikan ini wkwkwk ... Pada menu kali ini terdapat sedikit perbedaan dengan menu yang sebelumnya dan untuk mengetahui perbedaan nya silahkan lihat pada demo dibawah ini .
CSS
/* Awae aweu Aweu */
.bolenang:before,
.bolenang:after {
content: " ";
display: table;}
.bolenang:after {
clear: both;}
.bolenang {
*zoom: 1;}
/* Style */
nav {
height: 40px;
width: 100%;
background:#3E5553;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;}
nav li {
display: inline;
float: left;}
nav a {
color: #9BA26E;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;}
nav li a {
border-right: 2px solid #222324;
box-sizing:border-box;}
nav li:last-child a {
border-right: 0;}
nav a:hover, nav a:active {
background-color: #50838A;}
nav a#pull {
display: none;}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {height: auto;}
nav ul {width: 100%;
display: block;
height: auto;}
nav li {width: 50%;
float: left;
position: relative;}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {text-align: left;
width: 100%;
text-indent: 25px;}
}
/*Responsinator*/
@media only screen and (max-width : 480px) {
nav {border-bottom: 0;}
nav ul {display: none;height: auto;}
nav a#pull {
display: block;
background-color: #355758;
width: 100%;
position: relative;}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;}
}
/*Smartphone Responsinator*/
@media only screen and (max-width : 320px) {
nav li {display: block;float: none;width: 100%;
}
nav li a {border-bottom: 1px solid #576979;}
}
HTML
<nav class="bolenang">
<ul class="bolenang">
<li><a href="#">Home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</nav>
JS
$(function() {
function puller(){
var w = $(window).width();
if(w > 480 && menu.is(':hidden')) {
console.log('larger than 320');
menu.removeAttr('style');
}
if (w < 481) {
if(!$('#pull').length) {$('<a href="#" id="pull">Menu</a>')
.insertAfter('nav ul');}}
}
var menu = $('nav ul');
puller();
$('body').on('click','#pull', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
puller();
});
});
Silahkan di acak-acak untuk penyesuaian dengan tema template sobat.
Setiap punya waktu teruslah modifikasi template , karena cara itulah yang akan mampu membawamu pada hal yang baru CONTOH EROR PAGE
menu lagi mas
BalasHapusIya nih sob .. sebelum ke blogazine hehe
Hapuslalu mau posting blogazine??
HapusSimple tapi keren ya kang :)
BalasHapusCeritanya lagi ndak siaran nih kang Rul
Gak mas lagi ada event .. ini juga disela-sela event
Hapusmumpung lagi rehat .......!!
saya punya menu special mas Budi,,,,
HapusOpo menu ne kang hihi
Hapuskalau kang dede pasti menu masak memasak yah kang hehe...
HapusIya mas.. lihat aja badan'y kurus gitu hehehe
HapusSimple dan elegant ya Mas Rully..
BalasHapusIya lumayan mas
Hapuswidih keren ni mas ruly menunya :D bikin saya tergiur :D
BalasHapusBener ya hehe
Hapusmaaf ni kang, jadi oot..
HapusJujur ni ya kang, halaman 404 errornya keren kang.. :-bd
lumayan lah ... !!! sedikit dengan sentuhan blogazine
Hapusedit html lagi? hem...istirahat dullu dari itu, lagi payah dengan html hehehe :)
BalasHapussalam silaturahmi
Memang cape mbak edit-edit mulu mah
Hapusjauh beda sama menu di rumah makan saya kang Ruly,,sekali klik langsung keluar nasi soto hahaha
BalasHapusEta kode Awae aweu Aweu bahasa mana Kang ??? :D
BalasHapusAya bahasa bolenag ngan sagala. te sakalian di minyakan waekang amih Herrrrrang :)
HapusKade weh Kang Heri ulah minyak jalantah akh hehe :D
HapusMun bisa mah menu responsive na pasian penyedap rasa hh :-d
Aya aya wae kang saud Mah atu digulung sireum ngangge minyak jalantah mah...
HapusHahahaha ngaraco yeuhhhh
HapusSelamat pagi Kang Ruly, wuiih Mantap lah Menu simple Menu Responsive na
BalasHapusMani Bolenang mencrang kasawangna,. komo lamun di minyakan saur Kang Heri mah :D
Di bungkus heula pake buat saya Belajar mendalami tentang Responsive yeu Kang makasih
Ijin Follow Blog nya ya Kang agar silaturahmi lebih nyaman
Dan setiap update artikel nu Kasep ini saya bisa ingin terdepan
Terima kasih sebelumnya Kang Ruly :-bd
selamat sore jg mas saud ... silahkan mas !!
HapusSimple banget ya keliatan nya, mantap deh :D
BalasHapuslumayan lah sob .......
Hapusbanyak banget contoh menunya yah pas lihat di demonya, memang setelah saya coba sesuai dengan judulnya simple responsive kang :)
BalasHapusItu contoh pada variasi tampilan mas ..
HapusLagi demam-demamnya responsive ya...
BalasHapusyoi sob ....
Hapusmantap kang... nati dipulung sama sayah :-bd
BalasHapusheuheuy deudeuh si akang
Hapusmantep nihkang selalu responsive yah =D
BalasHapushehe lagi demam kang ...
HapusSampurasun... :)
BalasHapusRampess kang ..........
Hapuswah , semacam menu toggle yah ??? :) lebih keren seperti punya damzaky.blogspot yang ada iconnya mas dan simple ,, hehehe
BalasHapuswah kalau beliau sih mastahnya sob ...
Hapushahaha iya mas , tapi memang mempelajari kodenya sangat susah ... saya cari tutorial seperti itu di google saja susah banget ,, nggk ketemu-ketemu ...
Hapusbtw , konversi kodenya keren :D
Memang sih lumayan rumit ...
Hapusasal -asal'an aja sob daripada gak ada sama sekali hehe
keren buttonya mas .. mau coba nanti nya .. simpen dulu buat referensi ..
BalasHapusbutton apa coba ?? ....
Hapuskok malah hehe??
BalasHapusMasih design .. bingung sangat !!
Hapusmenu makan saing nya mana kang
HapusKamana wae yeu si akang :) menu kopi yu ah,, hee.. :)
BalasHapus(agar komentar lebih relevan saya sisipin kata menu)
Aya kang tapa hula ... ah dasar yeuh
Hapuswaduh kalau suruh memilih kodenya sayah angkat tangan deh kang... taluk... taluk
BalasHapusSama dong saya angkat kaki malah wkwkwkwk...
Hapushuwaaa lama gak blogwalking, sudah banyak perubahan ya!!
BalasHapussaya jadi kepingin gitu donlot template baru... yang lebih responsive :)
ada rekomendasi lagi.
Gak punya sis ... hehe
Hapuswih mantep nih boleh dicoba,,. hihi kunjungan Perdana kang,. hehe
BalasHapusSilahkan kang ...
Hapus