Responsif Menu Navigasi Dengan CSS

Halo sobat, kali ini kita akan membuat menu navigasi yang responsif hanya dengan CSS. Sebenarnya sudah banyak sekali generator-generator untuk membuat menu yang responsif dengan pilihan yang bagus-bagus dan keren. Tapi setelah saya lihat dan saya pelajari, kode-kode dari beberapa generator itu banyak dan cukup ribet sehingga dapat mebuat blog atau web kita sedikit lebih berat untuk dimuat, apalagi menggunakan Javascript.

Entah kenapa saya sangat tidak suka dengan yang lemot-lemot. Oleh karena itu akhirnya saya edit beberapa kode dari generator itu dan jadilah menu yang akan kita buat ini. Oke, pertama yang harus kita lakukan adalah membuat kerangka HTML-nya seperti berikut.

<nav id="menu">
    <a href="#menu" title="Tampilkan menu">Tampilkan Menu</a>
    <a href="#" title="Sembunyikan menu">Sembunyikan menu</a>
    <ul>
        <li><a href="#">menu1</a></li>
        <li>
            <a href="#">menu2</a>
            <ul>
                <li><a href="#">Dropdown menu1</a></li>
                <li><a href="#">Dropdown menu2</a></li>
                <li><a href="#">Dropdown menu3</a></li>
                <li><a href="#">Dropdown menu4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">menu3</a>
            <ul>
                <li><a href="#">Dropdown menu1</a></li>
                <li><a href="#">Dropdown menu2</a></li>
                <li><a href="#">Dropdown menu3</a></li>
            </ul>
        </li>
        <li><a href="#">menu4</a></li>
    </ul>
</nav>

Lalu buatlah kode CSS seperti berikut

#menu > a{display: none;}
#menu li{position: relative;}
#menu > ul > li{
  width: 25%;
  height: 100%;
  float: left;
}
#menu li ul{
  display: none;
  position: absolute;
  top: 100%;
}
#menu li:hover ul{display: block;}
@media only screen and ( max-width: 40em ){ //membuat tampilan menu berubah pada lebar dibawah 40em
 #menu {position: relative;}
 #menu > a{}
 #menu:not( :target ) > a:first-of-type,
 #menu:target > a:last-of-type{display: block;}
 #menu > ul{
   height: auto;
   display: none;
   position: absolute;
   left: 0;
   right: 0;
 }
 #menu:target > ul{display: block;}
 #menu > ul > li{
   width: 100%;
   float: none;
 }
 #menu li ul{position: static;}
}

Jika sudah selesai maka kurang lebih yang kita buat tadi akan menjadi seperti ini

Tadaaaa... menu navigasi kita sudah responsif dan sangat ringan. Selanjutnya yang perlu kita lakukan adalah merubah desainnya sesuai keinginan

Lihat Demo