Membuat Menu Responsive Dengan CSS

Membuat Menu Responsive Dengan CSS - Pada postingan ini Saya akan membagikan contoh Cara membuat Menu Responsive dengan ikon garis tiga hanya dengan CSS tanpa JavaScript. Mungkin Anda sering melihat Menu navigasi ketika menggunakan media kecil seperti HP muncul Garis Tiga , nah garis tiga itu bisasanya bisa dinamakan icon Burger, karana memang kalo diperhatikan mirip hamburger. hehe.

Untuk cara membuatnya pun cukup mudah. Jika Anda ingin menerapkan menu responive hanya dengan CSS ini pada blog Anda, silahkan simak caranya berikut ini.

Simpan CSS di bawah ini pada css style template blog Anda.

#menu{
	background:#888;
	height:45px;
	margin:0 auto;
	}
#menu ul,#menu li{
	margin:0 auto;
	padding:0 0;
	list-style:none
	}
#menu ul{
	height:45px;
	width:auto;
	}
#menu li{
	float:left;
	display:inline;
	position:relative;
	font-size:14px;
	color:#fff;
	font-weight:500;
	}
#menu a{
	display:block;
	line-height:45px;
	padding:0 14px;
	text-decoration:none;
	color:#fff;
	}
#menu li a:hover {
	color:#fff;
	background-color:#555;
	transition: all 0.3s ease-in;
	}
	
/* Dropdown Menu */
#menu a.sub:after{  /* Kode Panah */
	content:'';
	display:inline-block;
	background-color:#fff;
	color:#fff;
	width:12px;
	height:12px;
	margin-left:10px;
	vertical-align:-1px;
	transition:all .3s ease;
	background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,10L12,15L17,10H7Z`' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#menu a.sub:hover:after{ 
	transform:rotate(180deg); /* Panah diputar saat disentuh mouse */
}

#menu ul.menus{ 
	height:auto;
	overflow:hidden;
	width:180px;
	background:#666;
	position:absolute;
	z-index:99;
	display:none; /* Dropdown tersembunyi */
	left:0;
	}
#menu ul.menus li{
	display:block;
	width:100%;
	}
#menu ul.menus a{
	color:#fff;
	line-height:45px;
	}
#menu ul.menus a:hover{
	background:#5d99a2;
	color:#fff;
	}
#menu li:hover ul.menus{
	display:block
}

/* Toggle Icon Burger) */
.ToggleIcon {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 27px;
    right: 27px;
    height: 22px;
    width: 22px;	
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
	display:block;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}

/* 	Efek icon burger berganti menjadi silang */
input[type=checkbox]:checked ~ .ToggleIcon > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

input.openMenu {
    position: fixed;
    top: -100px;
    opacity: 0
}

/*	Sembunyikan Icon Burger */
label.ToggleIcon {
    display: none;

}

Agar menu jadi responsive, rubah menu horizontal jadi vertikal pada media query yang di tentukan. pada contoh disini untuk pengaturan media query pada nilai 960px

/*	Pada ukuran layar 960px mulai pengaturan Responsive */
@media screen and (max-width:960px){
#menu {
  display:none; /* menu horizontal disembunyikan */
}	
label.ToggleIcon {
  display:block; /* burger icon dimunculkan */
}

/* merubah menu menjadi vertikal ketika Burger icon diklik*/
input[type="checkbox"]:checked ~ #menu {
  display: block;
  width: 100%;
  background: #777;
  position: fixed;
  top: 70px;
  left: 0;
  height: 100vh;
  overflow-y: visible;
  padding: 10px 0 0 0;
  scrollbar-width: none;
  scrollbar-width: none;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9999;
}
input[type="checkbox"]:checked ~ #menu li {
  position: relative;
  margin:0;
  display: block;
  text-align: left;
  float:none;
}
input[type="checkbox"]:checked ~ #menu ul.menus{
  height:auto;
  overflow:hidden;
  width:100%;
  background:#666;
  position:relative;
}
input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

/* memberikan efek slide muncul dari kiri */
@-webkit-keyframes slideInLeft {
    0%
	{
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: visible;
      }
      100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      }
      }
      @keyframes slideInLeft {
      0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: visible;
      }
      100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      }
      }
}	

Jika sudah, sekarang tambahkan kode HTML di bawah ini untuk menambahkan icon toggle nya berupa ikon garis tiga. Simpan sebelum kode <header>

<input type="checkbox" class="openMenu" id="openMenu"/>
  <label for="openMenu" class="ToggleIcon">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
</label>

Dan simpan kode di bawah ini untuk menampilkan menunya, simpan sesudah kode </header>

<nav id="menu">
  <ul>
	<li><a href="#">HOME</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Tanpa Dropdown</a>
</li>
	<li><a class="sub" href="#">Dropdown</a>
	  <ul class="menus">
		<li><a href="#">Menu1</a></li>
		<li><a href="#">Menu2</a></li>
		<li><a href='#'>Menu3</a></li>
	  </ul>
	</li>	
</nav>

Nah selebihnya silahkan sesuaikan background dan lainya sesuai selera Anda, agar terilhat lebih bagus lagi..