Membuat menu responsive menggunakan css dan html

Bagi yang sudah penasaran dan ingin cepat-cepat menerapkan style menu responsive ini, silahkan ikuti saja panduan yang akan saya berikan ini.

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.