Cara Membuat Menu Responsive Tanpa Javascript - Pada tutorial kali ini kita akan 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. Dari pengalaman yg ada, terlalu banyak Javascript di dalam sebuah blog maupun website, tentu akan memperlambat kecepatan loading blog tsb. Menu Responsive sederhana ini membuktikan bahwa javascript tidak selalu diperlukan untuk membuat blog terlihat profesional.
Demo
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
Menu responsive diatas merupakan menu responsive dropdown. Jika anda ingin menghapus dropdown-nya silahkan hapus kode warna merah. Tahap diatas belum selesai. Kita harus memasang kode css-nya.
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.
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
Demikianlah tutorial cara membuat menu responsive tanpa javascript atau membuat menu navigasi responsive hanya menggunakan css saja. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa berlanggan atau like, follow serta bagikan artikel ini ya.
Posting Komentar