Skip to main content

Cara Membuat Menu Responsive Tanpa Javascript

Cara Membuat Menu Responsive Tanpa Javascript
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
  • 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
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.
Labels:

Comments

Post a Comment

Popular posts from this blog

10 Jembatan Paling Terkenal Di Dunia

10 Jembatan Paling Terkenal Di Dunia - Jembatan merupakan sebuah sarana untuk menyeberangi sungai ataupun lautan. Jembatan paling terkenal di dunia berikut mungkin adalah jembatan terpanjang, jembatan tertinggi di dunia. Banyak wisatawan dari penjuru dunia datang hanya untuk melihat maupun berfoto diatas jembatan ini. Berikut adalah 10 jembatan paling terkenal di dunia . 1. Jembatan Golden Gate, Amerika Serikat Jembatan paling terkenal pertama adalah jembatan Golden Gate. Jembatan Golden Gate (Golden Gate Bridge) menghubungkan antara San Fransisco dengan California. Jembatan ini memiliki panjang keseluruhan sekitar 2.727 meter dan tinggi 230 meter diatas permukaan laut. Jembatan Golden Gate dibuka pertama kali pada tahun 1937 dan merupakan jembatan paling terkenal serta menjadi daya tarik wisata paling populer di San Francisco. 2. Jembatan Menara, Inggris Jembatan paling terkenal kedua adalah jembatan Menara. Jembatan Menara (Tower Bridge) dibangun pada tahun 1886 dan
Post a Comment
Read more

10 Daftar Film Terbaru Mei 2017

10 Daftar Film Terbaru Mei 2017 - Pada era globalisasi ini film sudah menjadi teman nonton yang paling digemari. Terlebih lagi animasi-animasi film sekarang sudah mumpuni dan seperti aslinya. Pasti kita merasa tak sabar ingin menonton film terbaru di bioskop-bioskop kesayangan. Bagi yang lagi menunggu film terbaru 2017 , berikut daftar film box office terbaru terbit pada bulan Mei 2017 beserta jadwal film bioskop terbit Mei 2017 . Yang pasti film di bawah ini bergenre film Action, film Animation, film Crime, film Sci-Fi, film Superhero, Wars, Thriller, Horror, Comedy, Drama, Romance, Musical, Adventure, Adaptation, True Story dan lainnya. Berikut 10 Daftar Film Terbaru Mei 2017 . Baca juga 10 Film April 2017 . 1# Guardians Of The Galaxy 2 (2017) # Poster Terbit : 5 May 2017 Tapike Director: James Gunn Cast: Chris Pratt Zoe Saldana Dave Bautista Vin Diesel Bradley Cooper Companies: Walt Disney Pictures Genre : Drama IMDb Guardians Of The Galaxy 2 Official Trailer
Post a Comment
Read more

10 Tempat Wisata Terbaik Di Malaysia

10 Tempat Wisata Terbaik Di Malaysia - Malaysia merupakan sebuah negara dengan luas 329.847 km persegi. Malaysia juga banyak memiliki tempat wisata terpopuler di dunia, salah satunya yaitu menara Petronas. Pusat kota Malaysia terletak di Kuala Lumpur dan tempat wisata yang sering dikunjungi wisatawan lokal maupun mancanegara  rata-rata berada di kota ini. Bagi anda yang ingin berkunjung ke Malaysia, berikut 10 tempat wisata terbaik di Malaysia . Baca juga 10 tempat wisata terbaik di Laos . 10 Tempat Wisata Terbaik Di Malaysia Tempat Wisata Menara Petronas Tempat wisata terbaik Malaysia pertama adalah Menara Petronas. Menara Petronas merupakan menara kembar yang terletak di kota Kuala Lumpur dan pernah menjadi menara tertinggi di dunia pada tahun 1998 hingga tahun 2004 yg kemudian di kalahkan oleh menara Taipe 101 [baca : Menara Tertinggi Di Dunia]. Menara Petronas dibuka mulai pukul 08.30 setiap harinya kecuali hari senin. Untuk harga tiket masuk tempat wisata terpopuler di malaysia
Post a Comment
Read more