Membuat Animasi Slide Menu dengan CSS3

16/04/2018    Risman Hakim    100     Website

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.

<body>
    <div id="nav">
      <ul>
        <li>
            <a href="#">About</a>
            <a href="#">See Us &raquo;</a>
        </li>
        <li>
            <a href="#">Profile</a>
            <a href="#">See Us &raquo;</a>
        </li>
        <li>
            <a href="#">Blog</a>
            <a href="#">See Us &raquo;</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

Membuat Animasi Slide Menu dengan CSS3

Baiklah cukup sekian tutorial sederhana mengenai bagaimana Membuat Animasi Slide Menu dengan CSS3, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

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