Membuat navigasi menu responsive menggunakan style CSS

Pada artikel kali ini saya akan mencoba membagikan cara membuat menu responsive tanpa javascript, dan hanya menggunakan style css saja. Apakah bisa? ya bisa donk.hee

Bila anda sudah bosan dengan model menu dari twitter bootstrap pasti anda akan mencari tahu opsi lain membuat navigasi responsive menu tanpa bootstrap. Saya berikan contoh seperti menu di blog tukarpengetahuan.com (lama) ini, awalnya menu yang saya gunakan juga menggunakan bootstrap tapi karena saya ingin meningkatkan kecepatan loading pagenya untuk kenyamanan pengunjung dan pembaca blog saya.

Akhirnya saya lepas semua menu bootstrap tersebut dan sekarang saya hanya menggunakan menu pure style CSS saja. Dan memang terbukti setelah saya ganti dengan navigasi menu responsive menggunakan css, kecepatan loading page tukarpengetahuan.com (lama) mengalami kenaikan yang cukup signifikan.

Baca juga : Ayo cek kecepatan loading page dengan GTMetrix

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 :

menu-responsive-desktop

3. Untuk membuat menu agar responsive maka kita perlu menggunakan media query

Berikut tampilan ketika mobile responsive

mobile-menu-responsive-css

Bagaimana sudah berhasil belum?

Jika belum berhasil juga akan saya berikan full html dan css, anda tinggal download saja.(iwn)

Download menu responsive Full HTML

Download menu responsive Full CSS

6 comments

  1. blog ini baru saya revamp mas tampilannya. Jadi menu yang responsive tersebut belum saya pasang kembali. Jika ingin mencobanya silahkan download file yang sudah saya berikan. Trims

Leave a Reply

Your email address will not be published. Required fields are marked *