Cara Membuat Menu Navigasi Responsive dengan CSS

Saya pernah membuat panduan bagaimana membuat menu navigasi horizontal dan dropdown secara dasar dan bagus untuk pemula. Karena pada panduan tersebut, saya bukan hanya memberi kode matang untuk di copy paste saja....

....tapi.... juga saya berikan penjelasan sejelas mungkin yang saya mampu.

Dan untuk melengkapinya, maka saya buatkan juga cara membuat menu navigasi responsive dengan css....

Ya... benar saja! Ini hanya memainkan peran css saja!

Seperti juga pada panduan membuat website responsive yang pernah saya buat tempo hari.... hanya dominan memainkan css saja!

Sedikit informasi.... setelah saya pahami, sebenarnya banyak sekali panduan membuat menu navigasi responsive yang mungkin sudah diposting oleh blogger blogger kawakan.....

Terutama kalau mau hasilnya bagus.... bisa membaca panduan dari para bule.....

Hanya saja.... kebanyaka dari mereka memberi kode utuh yang tinggal kita copy paste saja!

Salah kah? Nggak sama sekali! Tentu itu praktis, lebih mudah dan gak ribet.....

Hanya saja..... ketika terjadi suatu kendala, misal....

1. kodenya ada yang tidak ke copy paste keseluruhan..... 
2. kurang responsive pada ukuran layar tertentu...... 
3. terlalu panjang menu navigasinya dan beda dengan contoh, lalu bingung meresponsivekannya....
4. atau yang parah.... kodenya sendiri belum dicoba oleh siempunya panduan.... dan ternyata kodenya gak bekerja.... (Ada lhoh orang kayak gini!)

Maka.... kamu yang belum ahli tentang kode html css pasti dibuat bingung bagaimana mengatasinya....

Ujung-ujungnya..... cari referensi atau panduan lainnya.... dan kode itu dihapus..... begitu seterusnya.....

Lhah.... kapan ngeblognya? (Saya dulu begitu)

Untuk penjelasan awal.... ada tiga cara yang saya kombinasikan...

• Pertama, menggunakan media query, Saya rasa.... kamu juga sudah paham kalau untuk membuat tampilan website yang responsive, media query seperti salah satu rukun wajibnya...
• Kedua, saya menggunakan dua menu navigasi, menu navigasi horizontal (Jika mau dibuat dropdown juga gak masalah) dan menu navigasi dropdown.
• Ketiga, menggunakan permainan kode css display, display:none untuk menyembunyikan dan display:block untuk menampilkan.

Jadi.....

Pada tampilan dekstop, saya akan menggunakan menu navigasi horizontal dan menu dropdown saya sembunyikan.... sementara pada tampilan ponsel, giliran menu dropdown yang saya tampilkan dan menu navigasi horizontal yang saya sembunyikan.

Bingung?

Biasanya sih memang bingung kalau nggak sekalian kita praktekkan.

Kita coba saja.... saya akan menggunakan template yang pernah saya buat sejak panduan membuat template sendiri (panduan yang pertama).

Seperti pada screenshot di bawah ini!

Kode yang saya gunakan untuk ukuran layar dekstop adalah seperti ini!

Kode CSS yang diletakkan di atas </style> atau di atas <![CDATA[
]]></b:skin>

.navbar{float:right;width:100%;padding-top:0px; background-color: #4d4544}
.topnav {list-style-type: none;margin: 0;padding: 0;background-color: #4d4544;height:50px}
.topnav li {float: left;height: 50px;}
.topnav li a {display: inline-block;color: #fff;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 20px;}
.topnav li:hover { background: #eaeaea; position: relative; }
.topnav li:hover a {color:#3094db;}
.topnav ul {left: -9999px;list-style-type: none;position: absolute;top: -9999px;}
.topnav li:hover ul {background-color: #eaeaea;left: 0px;padding: 0px;top: 50px;width: 160px;}
.topnav li:hover ul li { border: none; height: 40px; }
.topnav li:hover ul li a {background-color: #eaeaea;color: #3094db;display: block;text-align:left !important;font-size: 20px;height: 40px;line-height: 40px;padding: 0px;text-decoration: none;text-indent: 5px;width: 160px;padding: 3px;}
.topnav li:hover ul li a:hover {background: #3094db;color: #fff;height: 40px;padding: 3px;}

Dan berikut ini kode HTML-nya.... bisa kamu letakkan di atas header atau di bawah header

<nav class='navbar'>
<ul class='topnav'>
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.ganteng.id/search/label/Blog' title='Panduan Ngeblog Biar Tambah Pintar'> Blog</a>
<ul>
  <li><a href='#'>Template</a></li>
  <li><a href='#'>IM</a></li>
    </ul></li>
  <li><a href='#'>Template</a></li>
  <li><a href='#'>IM</a></li>
</ul>
  </nav>

Selanjutnya, kita akan membuat menu navigasi dropdown.....

Kode di bawah ini, letakkan tepat di bawah kode css navigasi di atas.

.bottomnav1 {display:none;list-style-type: none;width:150px;margin-top:0px;padding: 0;overflow: hidden;z-index:9999;margin-left:0px;background:#850126}
a.dropbtn1 {background: #850126;width:150px;display: inline-block;color: #fff;text-align: center;padding: 17px 0px;text-transform: uppercase;}
.dropdown1:hover .dropbtn1 {background-color: #eaeaea;color: #d71149;margin-bottom:0px}
.dropdown1 {display: inline-block;}
.dropdown-content1 {z-index:9999;display: none;position: absolute;background-color: #eaeaea;;margin-top:0px}
.dropdown-content1 a {font-size:20px;color: #555;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.dropdown-content1 a:hover {background-color:  #d71149; color:#fff}
.dropdown1:hover .dropdown-content1 {display: block;width:100%}

Kemudian, letakkan kode html pemanggilnya tepat di atas kode </nav>

<div class='bottomnav1'>
<div class='dropdown1'>
    <a class='dropbtn1' href='#' style='font-size:20px; font-weight:700'>Menu <i aria-hidden='true' class='fa fa-chevron-down' style='margin-left:20px;font-size:20px;'/></a>
    <div class='dropdown-content1' style='font-size:20px;'>
      <a href='#' style='font-size:20px;'>Kontak</a>
      <a href='#' style='font-size:20px;'>Panduan Blogging</a>
      <a href='#' style='font-size:20px;'>Internet Marketing</a>
    </div>
  </div>
  </div>

Jika kamu simpan, dan ingin lihat hasilnya.... tidak akan ada perubahan!

Kenapa?

Coba kamu cermati pada kode css bottomnav1, terdapat kode display:none.... Yang artinya widget atau elemen tersebut sedang disembunyikan.

Jadi, kalau kamu ingin melihat hasilnya, ganti display:none menjadi display:block

Dan hasilnya akan seperti ini!

Tapi.... berhubung kita akan menjadikannya menu navigasi yang responsive, sebaiknya kembalikan kodenya menjadi display:block.

......Langkah selanjutnya.....

Kita akan menggunakan media query....

@media screen and (max-width:850px) { kode css di sini!}

Ada banyak ukuran layar, tapi saya menggunakan ukuran 850px saja karena menurut saya sudah bisa mewakili beberapa ukuran layar ponsel.

Caranya sangat gampang.....

Jika pada layar dekstop, menu navigasi utama yang ditampilkan sementara menu navigasi dropdown (calon responsive) disembunyikan, maka sekarang kita balik....

Jadinya begini!

@media screen and (max-width:850px) {.topnav{display:none} .bottomnav1{display:block}}

Oh ya,jangan lupa kodenya letakkan di atas </style>

Simpan.... dan coba lihat dengan mengecilkan browser atau membuka melalui ponsel.

Seharusnya jadi seperti ini!

Bisa kan?

Oh ya, gimana kalau ukuran layarnya lebih besar daripada ponsel tapi tak sebesar layar dekstop?

Kalau jumlah menunya tidak banyak, jarang sekali timbul masalah.... Tapi.... jika menunya sangat banyak, biasanya membuat menu navigasi tak mampu menampung seluruh menu saat dibuka pada ukuran layar yang tanggung.

Solusinya sangat gampang.....

Tetap menggunakan media query, tapi.... yang diatur tetap menu navigasi tampilan dekstop saja tanpa melibatkan menu navigasi kedua (dropdown/calon responsive)

Kamu harus dituntut kreatif dengan memperkecil margin kanan kiri, padding kanan kiri, sampai mengecilkan ukuran huruf.

misal kamu menggunakan ukuran layar 1000px

@media screen and (max-width:1000px) {.topnav{ margin-right:0px; margin-left:0px; padding-left:0px; padding-right:0px; font-size:11px}

Dan tetap diletakkan di atas </style>

Sekarang sudah beres panduan cara membuat menu navigasi responsivenya menggunakan css saja, seperti yang saya janjikan pada judul.

Kalau masih ada yang bingung, jangan malu bertanya di kolom komentar.