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 Artis Korea Paling Cantik

10 Artis Korea Paling Cantik - Pada postingan sebelumya, Tapike telah membahas siapa saja artis korea yang termasuk dalam daftar 10 artis korea paling ganteng . Jadi tidak lengkap rasanya kalo Tapike tidak membahas siapa saja artis korea paling cantik. Oke, kita langsung saja ya, Berikut 10 artis Korea paling cantik . 1. Song Hye Kyo Artis korea paling cantik pertama adalah Song Hye Kyo. Artis cantik yang lahir di Daegu, Korea selatan pada tanggal 26 Februari 1982 ini awalnya mengikuti ajang kompetisi pencarian model di serial Minggu pagi. Song Hye Kyo mulai populer ketika dia sukses dengan perannya di Autumn in My Heart dengan lawan mainnya Song Seung dan Won Bin. Tak hanya di korea selatan, tokoh Choi Eun-Seo yang diperankan olehnya  juga sukses sampai ke Asia. Lewat drama tersebut Hye Kyo berhasil membawa pulang beberapa penghargaan di ajang KBS Drama Award 2000. 2. Park Min Young Artis korea paling cantik selanjutnya adalah Park Min Young. Artis cantik kelahiran Seou
Post a Comment
Read more