Tips And Tricks Web Design #01 Navbar Animation
Tags: html, css, javascript, webdev
Published: 2021-12-29 02:35:38

Introduction📝
Halo semuanya, kembali lagi dengan saya untuk membahas seputar pemograman web🤓

Pada kesempatan kali ini, saya akan membagikan sedikit tips dan trik web design yaitu animasi pada navigasi menu.

Langsung saja kita mulai...

<h1>Tools & Prerequisites🛠️</h1>
Untuk mengikuti tutorial ini, terdapat beberapa tools yang digunakan serta prerequisites seminimal - minimalnya yang kalian harus bisa yaitu :
<ul>
<li>Text Editor : Sublime Text, VS Code ataupun sejenisnya.</li>
<li>Browser : Chrome, Firefox <a href="https://www.w3schools.com/cssref/css3_browsersupport.asp">(harus support CSS3)</a> dan sejenisnya</li>
<li>HTML Dasar</li>
<li>CSS Dasar</li>
<li>Javascript DOM</li>
</ul>

<h1>Let's Code!✍️</h1>

<h3>Step 1 : Mulai dengan kerangka HTML🤓</h3>
Pertama - tama kita harus membuat kerangka menggunakan HTML dulu agar nanti bisa kita styling dan memberikan event pada menu yang di klik.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tips And Tricks Web Design #01 Navbar Animation</title>
</head>
<body>
  <div class="container">
    <div class="navbar__menu">
      <div class="navbar__button">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</body>
</html>
```
Oke kerangka HTML nya sudah dibuat kita lanjut untuk styling menggunakan CSS.

<h3>Step 2 : Styling menggunakan CSS😎</h3>
```css
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items-center;
}

.navbar__menu {
  width: 85px;
  height: 85px;
  background: transparent;
  position: relative;
  cursor: pointer;
  margin-top: 5em;
}

.navbar__button {
  margin-top: 2.5em
}

.navbar__button span {
  width: 85px;
  height: 10px;
  border-radius: 3px;
  position: absolute;
}

.navbar__button span:nth-child(1),
.navbar__button span:nth-child(2),
.navbar__button span:nth-child(3){
  background-color: #282A2B;
  transition: all .3s ease-in-out;
}

.navbar__button span:nth-child(1) {
  transform: translateY(-23px);
}

.navbar__button span:nth-child(3) {
  transform: translateY(23px);
}

.navbar__button.open span:nth-child(1) {
  transform: rotate(45deg);
}

.navbar__button.open span:nth-child(2) {
  background: transparent;
}

.navbar__button.open span:nth-child(3) {
  transform: rotate(-45deg);
}
```
<h3>Step 3 : Javascript DOM😊</h3>
Oke, selanjutnya kita buat supaya dapat terlihat animasinya kita gunakan Javascript DOM.

```javascript
const navbarMenu = document.querySelector('.navbar__menu')
const navbarButton = document.querySelector('.navbar__button')

let isOpen = false;

navbarMenu.addEventListener('click', () => {
  if(!isOpen) {
    navbarButton.classList.add('open')
    isOpen = true
  } else {
    navbarButton.classList.remove('open')
    isOpen = false
  }
})
```

Untuk hasilnya kalian bisa lihat <a target="_blank" href="https://codepen.io/adityamputra27/pen/OJxQLQZ">disini</a>

<h1>Congratulations👏🎉</h1>
Terima kasih kepada kalian semua karena sudah mengikuti tips dan trik ini dari awal sampai akhir, saya harap kalian mengikuti dengan benar - benar (tidak copy paste). Selamat juga untuk kalian jika tips dan trik ini berhasil😉. See you😚👋