/ / Cara Membuat Menu Navigasi Responsive

Cara Membuat Menu Navigasi Responsive

November 25, 2015
Cara membuat menu navigasi responsive tanpa javascript atau hanya menggunakan css saja. Kebanyakan menu navigasi khususnya menu navigasi responsive dibuat menggunakan kombinasi dari html, css dan Javascript.Menu Responsive sederhana ini membuktikan bahwa javascript tidak selalu diperlukan untuk membuat blog terlihat profesional.


Jika penasaran, ingin mencoba di blog yang ada Anda punya, lansung saja ikuti langkah-langkah di bawah ini:

HTML Menu Responsive
  • Login ke akun Blogger sobat.
  • Klik tata letak pada dashboard.
  • Lalu tambahkan element/add gadget dan pilih HTML/Javascript.
  • Copy dan pastekan html di bawah ini.
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button"/>   
<ul id="menu">
<li><a href="http://typepedia.blogspot.com">Home</a></li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Cara Membuat</a></li>
<li><a href="#">Menu Responsive</a></li>
</ul>
</li>
<li>
<a href="#">Widget ￬</a>
<ul class="hidden">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
  • Klik Simpan
CSS Menu Responsive
  • Login ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan html dibawah ini tepat diatas kode ]]></b:skin>
ul{list-style-type:none;margin:0;padding:0;position:absolute}li{display:inline-block;float:left;margin-right:1px}li a{display:block;min-width:140px;height:50px;text-align:center;line-height:50px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;background:#2f3036;text-decoration:none}li:hover a{background:#19c589}li:hover ul a{background:#f3f3f3;color:#2f3036;height:40px;line-height:40px}li:hover ul a:hover{background:#19c589;color:#fff}li ul{display:none}li ul li{display:block;float:none}li ul li a{width:auto;min-width:100px;padding:0 20px}ul li a:hover + .hidden,.hidden:hover{display:block}.show-menu{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-decoration:none;color:#fff;background:#19c589;text-align:center;padding:10px 0;display:none}input[type=checkbox]{display:none}input[type=checkbox]:checked ~ #menu{display:block}@media screen and (max-width : 760px){ul{position:static;display:none}li{margin-bottom:1px}ul li,li a{width:100%}.show-menu{display:block}}
  • Klik simpan
Semoga berhasil

Tampilkan Komentar