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

Makalah Tentang Sedimentasi

Kata Pengantar Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa karena atas rahmat-Nya makalah tentang sedimentasi dapat diselesaikan. Walaupun dalam pengerjaannya terdapat beberapa kendala teknis dan non teknis, namun dapat kami atasi. Penulis mengucapkan terima kasih atas bimbingan dari berbagai pihak dalam menyelesaikan makalah sedimentasi ini. Penulis menyadari masih terdapat banyak kekurangan dalam penulisan makalah sedimentasi ini. Untuk itu penulis mengharapkan kritik dan saran yang sifatnya membangun. Semoga makalah tentang sedimentasi ini dapat bermanfaat bagi para pembaca. BAB I PENDAHULUAN 1.1 Latar Belakang Indonesia merupakan daerah yang memiliki pantai terbanyak di dunia. Pantai merupakan sebuah wilayah yang menjadi batas antara lautandan daratan, bentuk pantai berbeda-beda sesuai dengan keadaan, proses yang terjadi di wilayah tersebut, seperti pengangkutan, pengendapan dan pengikisan yang disebabkan oleh gelombang, arus, angin dan keadaan lingkungan disekita...
Post a Comment
Read more

10 Tempat Wisata Terbaik Di Kamboja

10 Tempat Wisata Terbaik Di Kamboja - Kamboja merupakan negara yang terkenal dengan warisan budayanya berupa candi-candi yang berjumlah ratusan serta megah layaknya laos. Tak heran candi-candi ini sudah menjadi tempat wisata, baik dari wisatawan lokal maupun mancanegara. Tidak hanya candi, gunung-gunung di laos memiliki nilai keindahan tersendiri sehingga menjadi tempat wisata yang sering di kunjungi oleh wisatawan. Bagi anda yang ingin berwisata ke Kamboja, berikut 10 tempat wisata terbaik di Kamboja . Baca juga 10 tempat wisata terbaik di Filipina . 10 Tempat Wisata Terbaik Kamboja Tempat Wisata Angkor Wat Tempat wisata terbaik pertama di Kamboja adalah Angkor Wat. Angkor Wat adalah sebuah candi yg terletak di kota Ankor. Candi ini dibangun oleh Raja Suryawarman II pada abad ke-12. Pembangunan Ankor Wat memakan waktu hingga 30 tahun lebih dan merupakan candi paling terkenal di Angkor. Pada tahun 1992, Angkor Wat ditetapkan sebagai situs warisan dunia UNESCO. Angkor Wat juga menjadi...
Post a Comment
Read more