Cara membuat Navigasi Hamburger Responsive

Membuat navigasi menu responsive menggunakan style CSS

Pada tutorial kali ini saya akan mencoba memberikan cara membuat menu responsive tanpa javascript melainkan menggunakan css saja.
Langkah-langkah membuat menu responsive dengan css :

1. Buat File HTML

<div id="navcontainer"><label class="show-menu" for="show-menu"><i class="fa fa-bars fa-2"></i></label><input autocomplete="off" id="show-menu" role="button" type="checkbox"><ul id="menus"><li><a href="http://www.tukarpengetahuan.com/" title="home">Home</a></li><li><a href="http://www.tukarpengetahuan.com/p/pemrograman-web.html" title="pemrograman-web">Pemrograman web</a></li><li><a href="http://www.tukarpengetahuan.com/p/framework.html" title="framework">Framework</a></li><li><a href="http://www.tukarpengetahuan.com/p/teknologi-informasi.html" title="teknologi-informasi">Teknologi Informasi</a></li><li><a href="http://www.tukarpengetahuan.com/p/belajar-seo.html" title="belajar-seo">Belajar seo</a></li><li><a href="http://www.tukarpengetahuan.com/p/tips.html" title="tips">Tips</a></li></ul><div style="clear:both;"></div></div>

2. Buat File CSS

body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}/*Navmenu*/#navcontainer ul {list-style-type:none;margin:0;padding:0;position: relative;}#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}#navcontainer li a {padding:15px 10px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;background: #2f3036;text-decoration: none;}#navcontainer li:hover a {background: #FE9800;}#navcontainer li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}#navcontainer li:hover ul a:hover {background: #FE9800;color: #fff;}#navcontainer li ul {display: none;}#navcontainer li ul li {display: block;float: none;}#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}.show-menu {text-decoration: none;color: #fff;background: #FE9800;text-align: left;padding: 10px 5px;display: none; }#navcontainer input[type=checkbox]{display: none;}#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}#navcontainer .fa-2 {font-size: 2em;}#navcontainer .fa-2 { margin-right: 0.07142857em; margin-left:0.6em;}/*end-navmenu*//*css-styles-responsive*/@media screen and (max-width:1180px){ body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}}@media screen and (max-width:980px){ #navcontainer li a {min-width:80px;}}@media screen and (max-width:768px){ #navcontainer ul {position: static;display: none;} #navcontainer li {border-bottom: 1px solid #4d4d4d;} #navcontainer ul li, #navcontainer li a {width: 100%;} #navcontainer li a{display:block;height:auto;line-height:normal;} #navcontainer li a {text-align:left;} .show-menu {display:block!important;line-height:30px;} .show-menu:hover {cursor:pointer;} label {margin:0!important;}}/*end-responsive*/

Jika sudah selesai menambahkan file CSS, saya harap tampilan menu ketika di desktop sudah seperti gambar dibawah ini :

3. Untuk membuat menu agar responsive maka kita perlu menggunakan media query
Berikut tampilan ketika mobile responsive

Bagaimana sudah berhasil belum?

Jika belum berhasil juga akan saya berikan full html dan css, anda tinggal download saja.
Download menu responsive Full HTML
Download menu responsive Full CSS