Cara Membuat Menu Navigasi Responsive Menggunakan CSS

Please Wait

Tutorial membuat website - Artikel kali ini saya akan mencoba membuat menu responsive menggunakan html dan css tanpa javascript.

Dalam membuat tampilan website menu adalah komponen utama yang tidak boleh ketinggalan karena dengan menu pengunjung dapat melihat sebagai navigasi dari web yang telah dibuat. Untuk membuat menu biasanya statis atau ketika web browser di kecilkan menu tidak ikut mengecil alias tetap pada ukuran yang sama yang lebih parah lagi ukuran melewati batas web browser saat di kecilkan. Untuk mengatasi hal tersebut anda sekarang bisa membuat menu navigasi yang responsive alias flexsible ukurannya saat web browser di kecilkan atau dibesarkan. Kira-kira tampilannya akan seperti berikut ini:

Menu merupakan salah satu bagian penting yang ada pada website. Apabila Anda berencana membuat web dengan desain responsive, menu merupakan salah satu bagian yang harus Anda desain dengan baik. Untuk membuat desain menu menjadi responsive pada dasarnya tidak jauh berbeda dengan men-desain web responsive umumnya.

Baca juga :

Oke langsung saja ke TKP, cara membuat menu navigasi responsive menggunakan html dan css. Pada tutorial ini tidak menggunakan javascript dan hanya menggunakan html dan css.

Langkah-langkah membuat menu responsive dengan css

1. Buat file index.html

<!DOCTYPE html>
<html>
<head>
<title>Navigasi Menu Responsive</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<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://sharingcodeid.blogspot.co.id/" title="home">Home</a></li>
<li><a href="http://sharingcodeid.blogspot.co.id/" title="pemrograman-web">Doenlaod</a></li>
<li><a href="http://sharingcodeid.blogspot.co.id/" title="framework">Framework</a></li>
<li><a href="http://sharingcodeid.blogspot.co.id/" title="teknologi-informasi">Sistem Informasi</a></li>
<li><a href="http://sharingcodeid.blogspot.co.id/" title="belajar-seo">Tutorial</a></li>
<li><a href="http://sharingcodeid.blogspot.co.id/" title="tips">Tips dan Trik</a></li>
</ul>
<div style="clear:both;">
</div>
</div>
</body>
</HTML>

2. Kemudian buat file style.css

body{background: url(images/background.jpg);font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}

/*Navmenu*/
#navcontainer{background: #0024ff;}
#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 20px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;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-3 {font-size: 4em;}
#navcontainer .fa-4 {font-size: 7em;}
#navcontainer .fa-5 {font-size: 12em;}
#navcontainer .fa-6 {font-size: 20em;}

#navcontainer .fa-1,
#navcontainer .fa-2,
#navcontainer .fa-3,
#navcontainer .fa-4,
#navcontainer .fa-5,
#navcontainer .fa-6 {
  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 #fff;}
 #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;}
}

Jika sudah selesai membuat kedua file diatas maka selanjutnya buka dengan browser dan tampilannya akan seperti gambar dibawah ini:

Kemudian tampilan responsive akan seperti berikut ini:

Ok, kira-kira begitu cara membuat navigasi menu responsive menggunakan style CSS. Semoga bermanfaat sampai ke anak cucu.

Jika tidak mau repot ngoding sampai kriting silahkan download link di bawah ini:

Download menu navigasi responsive