Simple Responsive Nav With CSS Only

Sangat lama sekali saya jarang update karena banyak sekali kesibukan ditambah sudah dua hari  modifikasi blog jelek ini tapi biarpun jelek tetep disayang lho hehe ..parahnya lagi modifnya saya pake HP jadul al-hasil lumayan repot dan menyita waktu [ continue ] dan hasilnya gak sesuai yang diharapkan. [ next ] Hampir satu bulan lebih tidak sekali pun bikin artikel dan sekarang mumpung punya sedikit waktu dan juga sekaligus menjawab  request sahabat tentang membuat menu responsive yang hanya menggunakan si manis CSS . [ oks ] Biarpun menu kali ini sangat simple tapi jangan main-main dengan responsive nya wkwkwk... untuk yang penasaran pencet tombol dibawah ini 

Demosion

Sebenarnya menu simple ini bisa menjadi sangat menarik kalau kita sedikit kreatif . Nah kalau mas broh tertarik silahkan sematkan kode css dan html dibawah ini kedalam template sobat. 

CSS

#nav {
  width: 960px;
  background: hsl(202, 66%, 36%);
  font-weight: 600;
  font-size: 13px;
  border-radius: 5px;
}
#nav ul {
  margin: 0;
  padding: 0;
}
#nav a {
  color: hsl(0,0%,75%);
  text-decoration :none;
}
#nav a:hover {
  background: color: hsl(0,0%,75%);
}
#nav ul li, label[for=toggle] {
  display: inline-block;
  cursor: pointer;
  
  color: hsl(0,0%,75%);
  padding: 13px 10px 13px 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#nav ul li:last-child {
  padding: 13px 25px 13px 25px;
}
#nav ul li:hover,
label[for=toggle]:hover {
  color: hsl(0,0%,90%);
  text-shadow: 0 0 1px #fff; 
}
@media only screen 
and (min-width : 1025px) {
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }
}
@media only screen 
and (max-width : 679px) {
  #nav {
    width: 80%;
  }
  input[type=checkbox]#toggle {
    position: absolute;
    z-index: -9999px;
    top: -9999px;
    left: -9999px;
  }
  i.icon-menu-1 {
    margin: 0 10px 0 0;
  }
  label[for=toggle] {
    width: 90%;
  }
  #menu {
    display: none;
  }
  input[type=checkbox]#toggle:checked ~ #menu {
    display: block;
  }
  input[type=checkbox]#toggle:checked ~ #menu li {
    display: block;
  }
}
@media only screen 
and (min-width : 680px) 
and (max-width : 702px) {
  #nav {
    width: 80%;
    font-size: 11px;
  }
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }  
}
@media only screen 
and (min-width : 703px) 
and (max-width : 728px) {
  #nav {
    width: 80%;
    font-size: 12px;
  }
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  } 
}
@media only screen 
and (min-width : 728px) 
and (max-width : 1024px) {
  #nav {
    width: 80%;
    font-size: 13px;
  }
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }  
}

HTML

<nav id="nav" class="wrap">
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"><i class="icon-reorder"></i>Menu</label>
<ul id="menu">
<li><a href="url">Link text</a></li>
<li>Portfolio</li>
<li>Services</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Perhatikan huruf yang di blok !! itu untuk membuat link pada nama menu . Nah begitulah kira-kira dalam membuat menu sederhana ini .. Oks cukup sekian kesederhanaan saya dalam menyapa mas broh semua .. mudah-mudahan bermanfaat . Amienn !!