Membuat Animasi Slide Menu dengan CSS3
Membuat Animasi Slide Menu dengan CSS3 - Artikel yang akan saya bahas kali ini mengenai bagaimana Membuat Animasi Slide Menu dengan CSS3, seperti yang kita ketahui bahwa elemen menu didalam website sangatlah penting keberadaan nya. Bisa dibayangkan ketika suatu website tidak ada menu, mungkin pengguna akan kesulitan untuk konten ataupun halaman lain yang terdapat didalamnya. Untuk itu elemen menu didalam website sangatlah penting, tentu ada banyak sekali jenis menu yang terdapat pada webiste, mulai dari sidebar menu, dropdown menu dan lain sebagainya. khusus kali ini akan saya bagikan tutorial membuat animasi slide menu.
Langkah 1 : Membuat Animasi Slide Menu dengan CSS3
Baik, kita mulai untuk membuat animasi slide menu dengan langkah pertama, yakni kita akan membuat struktur sederhana dengan mengetikan sintak HTML berikut ini.
<div id="nav">
<ul>
<li>
<a href="#">About</a>
<a href="#">See Us »</a>
</li>
<li>
<a href="#">Profile</a>
<a href="#">See Us »</a>
</li>
<li>
<a href="#">Blog</a>
<a href="#">See Us »</a>
</li>
</ul>
</div>
</body>
Langkah 2 : Membuat Animasi Slide Menu dengan CSS3
Langkah selanjutnya adalah, kita akan desain layout menu dan yang paling penting adalah animasi pada menu yakni animasi slide, untuk itu silahkan kalian ketikan sintak CSS3 untuk membuat animasi slide menu.
@import url('https://fonts.googleapis.com/css?family=Black+And+White+Picture');
#nav {
height: 80px;
width: 700px;
overflow: hidden;
margin: auto;
text-align: center;
}
#nav ul {margin-top: -10px}
#nav ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}
#nav ul a {
display: block;
background: #E2B842;
color: #105469;
height: 100px;
width: 200px;
font: lighter 2em/100px 'Black And White Picture', sans-serif;
text-decoration: none;
transition: all .35s ease-in-out;
}
#nav ul a:nth-of-type(even) {
text-shadow: 0 0 6px #fff;
background: #105469;
color: #fff;
}
#nav ul li:hover :first-child {
margin-top: -100px;
}
Setelah semua sintak diatas telah diketikan, silahkan simpan filenya dengan nama index.html dan lihat hasilnya pada browser masing - masing, maka tampilan menu akan terlihat seperti pada gambar dibawah ini. Selesai
Baiklah cukup sekian tutorial sederhana mengenai bagaimana Membuat Animasi Slide Menu dengan CSS3, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
