Hallo sobat program, bertemu lagi dengan saya Rizal dan dipembahasan kali ini merupakan pembahasan lanjutan dari materi kita yang sebelumnya tentang Cara Membuat Menu Vertikal dengan HTML CSS. dan disini kita akan membahas lanjutnya yaitu tentang Cara Membuat Animasi Menu Vertikal dengan HTML CSS.
Dipembahasan ini kita akan membuat sebuah animasi sederhana dengan menggunakan atau memanfaatkan fungsi atau property dari transition serta pseudo-class hover pada CSS3 dan tidak perlu risau karena sangat mudah sekali teman-teman.
Cara Membuat Animasi Menu Vertikal dengan HTML CSS
Oke dari menu vertikal yang sebelumnya sudah kita buat teman-teman hanya menambahkan property sedikit seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> *{margin:0; padding:0;} menu {background: red; width: 100px; margin:5rem;} menu ul { list-style: none; } menu ul li a { width: 100px; background: red; transition: all 3s cubic-bezier(.14,.93,.69,.06); color: white; display: block; padding: 20px; text-align: center; border: 2px solid #ccc; font-size: 20px } menu ul li a:hover { width: 300px; background: yellow } </style> |
Silahkan teman-teman cocokan dengan yang kemarin, diatas saya menambahkan property width serta transition untuk menampilkan animasi sederhana dan contoh hasilnya teman-teman bisa lihat seperti pada gambar dibawah ini :
Untuk demo livenya teman-teman bisa klik Disini
Oke jadi seperti itulah pembahasan kita kali ini tentang Cara Membuat Animasi Menu Vertikal dengan HTML CSS. sebenarnya ini hasil explore saya sendiri dalam memanfaatkan property transition .
Oke cukup sekian pembahasa kali ini mudah-mudahan dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih