Membuat Icon Menu dengan HTML dan CSS

Langkah Pertama:

Add HTML berikut

<div></div>
<div></div>
<div></div>



Langkah Kedua:

Add CSS berikut

div {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;}

Penjelasan contoh:

Lebar dan tinggi properti menentukan lebar dan tinggi setiap batang

Saya telah menambahkan warna background hitam dan margin atas bawah digunakan untuk menciptakan jarak antar masing masing batang

Animasi Icon

Untuk animasi icon yang apabila di click berubah menjadi tanda silang 

Langkah pertama:

Add HTML berikut ini

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Langkah Kedua:

Add CSS berikut ini

.container {
    display: inline-block;
    cursor: pointer;}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;}

Langkah ketiga:

Add Javascript berikut ini

function myFunction(x) {
    x.classList.toggle("change");
}

itu tadi HTML dan CSS dan juga tambahan JS untuk membuat sebuah Icon Menu, semoga bermanfaat bagi pembaca, sekian terima kasih dan sampai jumpa...