DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Tips And Tricks Web Design #01 Navbar Animation
Aditya Muhamad Putra P.
Aditya Muhamad Putra P.

Posted on

Tips And Tricks Web Design #01 Navbar Animation

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
  }
})
Enter fullscreen mode Exit fullscreen mode

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๐Ÿ˜š๐Ÿ‘‹

Top comments (6)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

I think this is something different language :\

Collapse
 
adityamputra27 profile image
Aditya Muhamad Putra P.

Yes, i'm using indonesian languange, but i will make it in english later, thank you,,,

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

all the best

Collapse
 
hasibul294 profile image
Md. Hasibul Hasan

I don't understand the language :p

Collapse
 
adityamputra27 profile image
Aditya Muhamad Putra P.

Yes, i will make it in English version later, thanks for coming :v

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Join us at DEV Want to join the conversation?
ย 

It's easy! Become a DEV member to follow this post, comment, and more.