Cara Membuat Animasi Underline pada Menu

03/09/2019    Risman Hakim    17     Website

Cara Membuat Animasi Underline pada Menu - Adanya animasi pada elemen dalam sebuah website akan membuat tampilan semakin menarik dan lebih hidup dan sekarang ini hampir disetiap halaman website menampilkan animasi - animasi yang sangat menarik. Untuk membuat animasi tersebut ada banyak cara, bisa dengan CSS yang paling sederhana, dan dengan jQuery. Nah, pada kesempatan ini saya akan membagikan tutorial animasi sederhana dengan CSS yaitu bagaimana Cara Membuat Animasi Underline pada Menu. Untuk lebih jelas bagaimana cara membuatnya, simak langkah - langkahnya berikut ini.

Baik kita mulai dengan langkah pertama yaitu membuat struktur untuk menu, silahkan buat file index.html kemudian ketikan kode HTML berikut untuk membuat menu.

<body>
  <div class="wrapper">
    <nav>
      <ul>
        <li><a href="#" class="line"><span>Home</span></a></li>
        <li><a href="#" class="line"><span>About</span></a></li>
        <li><a href="#" class="line"><span>Service</span></a></li>
        <li><a href="#" class="line"><span>Contact</span></a></li>
      </ul>
    </nav>
  </div>
</body>

Setelah membuat struktur menu seperti diatas, langkah selanjutnya mengatur layout dan membuat animasi underline menu dengan kode CSS berikut ini.

  * {
    padding: 0;
    margin: 0;
    color: #D6AD60;
  }
  .wrapper {
    background-color: #122620;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
  }
  li {
    padding: 1rem 2rem;
  }
  a {
    text-decoration: none;
    position: relative;
    color: black;
    font-size: 2rem;
    font-weight: 900;
    padding: 8px 0;
  }
  .line::after {
    content: "";
    border-bottom: solid 4px #B68D40;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s;
  }
  .line:hover::after {
    transform-origin: left;
    transform: scaleX(1);
  }
  @keyframes line {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

Kalau sudah semua kode HTML dan CSS telah diketikan semua, langkah terakhir pastikan simpan kembali file index.html nya kemudian bisa dibuka dibrowser masing - masing untuk melihat hasil akhirnya.

Baiklah, saya cukupkan tutorial sederhana CSS mengenai bagaimana Cara Membuat Animasi Underline pada Menu, semoga bermanfaat dan bisa menjadi referensi dalam membuat menu. Selamat mencoba dan sampai jumpa ditutorial selanjutnya :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More