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.

<body>
    <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 :)

12 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat