Tips And Tricks Web Design #01 Navbar Animation

#html #css #javascript #webdev

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...

Tools & Prerequisites🛠️

Untuk mengikuti tutorial ini, terdapat beberapa tools yang digunakan serta prerequisites seminimal - minimalnya yang kalian harus bisa yaitu :

Text Editor : Sublime Text, VS Code ataupun sejenisnya.
Browser : Chrome, Firefox (harus support CSS3) dan sejenisnya
HTML Dasar
CSS Dasar
Javascript DOM

Let's Code!✍️

Step 1 : Mulai dengan kerangka HTML🤓

Pertama - tama kita harus membuat kerangka menggunakan HTML dulu agar nanti bisa kita styling dan memberikan event pada menu yang di klik.

<!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.

Step 2 : Styling menggunakan 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);
}

Step 3 : Javascript DOM😊

Oke, selanjutnya kita buat supaya dapat terlihat animasinya kita gunakan Javascript DOM.

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 disini

Congratulations👏🎉

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😚👋