Cara gampang membuat menu navigasi responsif pada templat blog ,menu navigasi pada blog sangatlah penting ,karena akan memudahkan pengunjung blog untuk mengakses semua isi blog anda ,dan bisa Meningkatkan traffick pada blog Mungkin bagi blogger newbie belum tahu caranya silahkan di simak .
Cara mudah membuat menu responsive yaitu navigasi link halaman (page link) atau daftar tautan situs (blog) yang penampilannya sesuaikan (adaptif/responsif) dengan piranti atau gadget yang dipakai user.
Menu responsive sisi dari tren design template situs (blog) terpopuler.
Daftar menu situs (blog) yang umumnya ada dibawah header ini begitu user friendly serta disenangi Google. Mesin pencari terpopuler didunia ini " senantiasa " berpihak pada user atau pembaca.
Kode-kode mengenai langkah membikin menu responsif Tricks yang telah diaplikasikan di template Johny Wuss Responsive serta New Max Mag.
Copas kode di bawah tepat di atasnya kode ]]</b:skin>
/*-----Responsive Menu ----*/
body {margin: 0px;}
- menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
- menu ul{height:45px;width:1024px}
- menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
- menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
- menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #5FC6EB;}
- menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;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:16px;position:absolute;left:35px}
- menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
- menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #31AFDB;}
- menu ul.menus a{color: #FFF;line-height: 35px;}
- menu li:hover ul.menus{display:block}
- menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
- menu{position:relative}
- menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
- menu ul.menus{width:100%;position:static;padding-left:20px}
- menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
- 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}
}
Merubah tampilan :
Jika ingin merubah warna background, anda bisa ubah kode berikut: #50B7DC
Ganti warna "hover", ubahlah: #5FC6EB
Perhatikan Daftar Warna kode HTML
Copy paste kode di bawah di bawahnya kode <body>
Ubah kode (#) dengan link target kemana akan anda arahkan dan nama menunya dengan " keinginan " Anda!
<nav id='menu'>
<input type='checkbox'/>
<label>≡Navigasi Menu</label>
- <a href="/">Home</a>
- <a href="#">About</a>
- <a href="#">Drop Down ▼</a>
- <a href="#">Contact</a>
- <a href="#">Drop Down ▼</a>
<Cara.https://www.solenk.com
