An Interest In:
Web News this Week
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
Some of Our Sources
- Engadget
- Simplebits
- Smashing Apps
- You The Designer
- Naldz Graphics
- Specky Boy
- CSS Tricks
- Android Dissected
- Codrops
- Dev To
Help Webnuz
Referal links:
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>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
Original Link: https://dev.to/adityamputra27/tips-and-tricks-web-design-01-navbar-animation-3e2i
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To