Cara Membuat Animasi Border Menu
Cara Membuat Animasi Border Menu - Setelah pada artikel sebelumnya saya bagikan tutorial mengenai Cara Membuat Animasi Bubble Menu, pada artikel kali ini akan saya bagikan lagi tutorial yang masih berhubungan dengan animasi pada menu, yaitu membuat desain menu lainnya yang tidak kalah menarik yakni bagaimana Cara Membuat Animasi Border Menu. Langsung saja saya akan praktekan caranya berikut ini.
Langkah 1 : Cara Membuat Animasi Border Menu
Seperti biasa, langkah pertama untuk membuat menu adalah dengan menentukan / membuat struktur HTML sederhana seperti berikut ini. Silahkan kalian bisa menyesuaikan banyaknya menu yang akan ditampilkan pada halaman web.
<div class="wrapper">
<ul>
<li class="menu0"><a href="#">home</a></li>
<li class="menu1"><a href="#">product</a></li>
<li class="menu2"><a href="#">services</a></li>
<li class="menu3"><a href="#">contact</a></li>
<hr />
</ul>
</div>
</body>
Langkah 2 : Cara Membuat Animasi Border Menu
Setelah membuat struktur menu seperti diatas, selanjutnya kita akan desain tampilan menu, mulai dari layout, warna dan tentunya membuat animasi border untuk setiap menunya, untuk itu silahkan ketikan sintak CSS berikut ini.
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
.wrapper {
width: 655px;
margin: auto;
}
ul li {
display: inline;
text-align: center;
}
a {
font-family: 'Do Hyeon', sans-serif;
display: inline-block;
width: 150px;
padding: 10px 0;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
color: white;
text-transform: uppercase;
}
.menu0 a {background: #E91E63;}
.menu1 a {background: #FF9800;}
.menu2 a {background: #00BCD4;}
.menu3 a {background: #4CAF50;}
.menu1:hover ~ hr {
margin-left: 154px;
background: #FF9800;
}
.menu2:hover ~ hr {
margin-left: 308px;
background: #00BCD4;
}
.menu3:hover ~ hr {
margin-left: 462px;
background: #4CAF50;
}
hr {
height: 4px;
width: 150px;
margin: 0;
background: #E91E63;
border: none;
transition: .4s ease-in-out;
}
Setelah semua sintak HTML dan CSS telah diketikan semua, silahkan simpan filenya kemudian kalian bisa membuka browser masing - msing dan lihat hasilnya, jika kita arahkan kursor pada setiap menu akan terjadi animasi bordernya. Selesai
Baiklah, cukup sekian tutorial mengenai bagaimana Cara Membuat Animasi Border Menu, 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)
