This content originally appeared on DEV Community and was authored by Aditya Muhamad Putra P.
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😚👋
This content originally appeared on DEV Community and was authored by Aditya Muhamad Putra P.
Aditya Muhamad Putra P. | Sciencx (2021-12-29T02:35:38+00:00) Tips And Tricks Web Design #01 Navbar Animation. Retrieved from https://www.scien.cx/2021/12/29/tips-and-tricks-web-design-01-navbar-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.