How To

Cara Membuat Icon Menu dengan CSS

Bagaimana cara membuat ikon menu dengan CSS, pada bab berikut ini anda akan mempelajari caranya.

Cara Membuat Menu Icon

Jika Anda tidak menggunakan libray icon, Anda dapat membuat menu icon dasar dengan menggunakan CSS.

Contoh :
Menu Icon

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>

<p>Menu icon:</p>

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

</body>
</html>

Menu Icon Animasi (klik di atasnya):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  display: inline-block;
  cursor: pointer;
}

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

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

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>

<p>Klik pada Ikon Menu untuk mengubahnya menjadi "X":</p>
<div class="container" >

Langkah 1) Tambahkan HTML

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

Langkah 2) Tambahkan CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>

<p>Menu icon:</p>

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

</body>
</html>

Penjelasan Contoh

Properti width dan height menentukan lebar dan tinggi setiap bar.

Pada contoh diatas kami telah menambahkan warna background hitam, dan margin atas dan bawah digunakan untuk membuat jarak antara setiap bar.

Ikon Animasi

Gunakan CSS dan JavaScript untuk mengubah ikon menu menjadi ikon “cancel/ remove” saat diklik:

Langkah 1) Tambahkan HTML

<div class="container" >

Langkah 2) Tambahkan CSS

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

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

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

/* Pudarkan bar kedua */.change .bar2 {
  opacity: 0;
}

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

Langkah 3) Tambahkan JavaScript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  display: inline-block;
  cursor: pointer;
}

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

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

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>

<p>Klik pada Ikon Menu untuk mengubahnya menjadi "X":</p>
<div class="container" >

Penjelasan Contoh

HTML & CSS: Contoh diatas menggunakan style yang sama seperti sebelumnya, hanya kali ini, kami membungkus elemen container di sekitar setiap elemen dan kami menetapkan nama kelas untuk masing-masing elemen.

Elemen container digunakan untuk menunjukkan simbol penunjuk ketika pengguna menggerakkan mouse ke atas div (bar). Saat diklik, maka akan menjalankan fungsi JavaScript yang menambahkan nama kelas baru ke dalamnya, yang akan mengubah style setiap bar horizontal: bar pertama dan terakhir diubah dan diputar menjadi huruf “x”. Bar di tengah memudar dan menjadi tidak terlihat.


Catur Kurnia Sari

Share
Tags: How To