Cara Membuat Tab Menu Html dan CSS Di Blog Elastis Animasi

cara membuat tab menu di blog dengan mudah menggunakan html dan css. dalam pembuatan tab menu mudah kamu bisa menerakan di blog. keren dan sederhana

Cara Membuat Tab Menu Html dan CSS

Teknologiku22 Hari ini di blog ini kamu akan belajar cara membuat Tab menu  hanya menggunakan HTML & CSS. Sebelumnya saya sudah berbagi blog tentang membuat  Ikon Sosial  Media Bersinar Menggunakan HTML & CSS desain yang menarik desain ini memiliki animasi tab aktif yang elastis.

tab menu adalah tempat pengunjung menemukan tautan ke halaman penting di situs web kamu. Dan tabnya sempurna untuk aplikasi web satu halaman, atau untuk menampilkan berbagai topik di area yang lebih kecil. Hari ini kamu akan belajar membuat Animasi Tab Elastis hanya dengan menggunakan HTML & CSS. 

Dalam program ini, ada bilah menu di halaman web dengan lima ikon menu yang berbeda dengan teks. Tetapi ketika kamu mengklik item menu tertentu, ditampilkan Animasi Tab menu html dan css Elastis yang diisi dengan warna latar belakang gradien.

kamu mungkin pernah melihat jenis animasi ini di suatu tempat, ada pustaka JavaScript atau JavaScript bekas tetapi ini adalah program CSS murni yang berarti saya hanya menggunakan HTML & CSS untuk membuat animasi ini.

Berikut  Cara Membuat Tab Menu Html dan CSS

Pertama, buat file HTML dengan nama index.html dan tempel kode yang diberikan di file HTML kamu. Ingat, kamu harus membuat file dengan ekstensi .html.


<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Elastic Tab Animation | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="wrapper">
         <nav>
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="inbox">
            <input type="radio" name="tab" id="contact">
            <input type="radio" name="tab" id="heart">
            <input type="radio" name="tab" id="about">
            <label for="home" class="home"><a href="#"><i class="fas fa-home"></i>Home</a></label>
            <label for="inbox" class="inbox"><a href="#"><i class="far fa-comment"></i>Inbox</a></label>
            <label for="contact" class="contact"><a href="#"><i class="far fa-envelope"></i>Contact</a></label>
            <label for="heart" class="heart"><a href="#"><i class="far fa-heart"></i>Heart</a></label>
            <label for="about" class="about"><a href="#"><i class="far fa-user"></i>About</a></label>
            <div class="tab"></div>
         </nav>
      </div>
   </body>
</html>

Kedua, buat file CSS dengan nama style.css dan tempel kode yang diberikan di file CSS kamu. Ingat, kamu harus membuat file dengan ekstensi .css.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

*{  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family : 'Poppins' , sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.wrapper{
  height: 60px;
  width: 55vw;
  background: #fff;
  line-height: 60px;
  border-radius: 50px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}
.wrapper nav{
  position: relative;
  display: flex;
}
.wrapper nav label{
  flex: 1;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}
.wrapper nav label a{
  position: relative;
  z-index: -1;
  color: #1d1f20;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.6s ease;
}
.wrapper nav #home:checked ~ label.home a,
.wrapper nav #inbox:checked ~ label.inbox a,
.wrapper nav #contact:checked ~ label.contact a,
.wrapper nav #heart:checked ~ label.heart a,
.wrapper nav #about:checked ~ label.about a{
  color: #fff;
}
.wrapper nav label a i{
  font-size: 25px;
  margin: 0 7px;
}
.wrapper nav .tab{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 50px;
  background: linear-gradient(45deg, #05abe0 0%,#8200f4 100%);
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper nav #inbox:checked ~ .tab{
  left: 20%;
}
.wrapper nav #contact:checked ~ .tab{
  left: 40%;
}
.wrapper nav #heart:checked ~ .tab{
  left: 60%;
}
.wrapper nav #about:checked ~ .tab{
  left: 80%;
}
.wrapper nav input{
  display: none;
}

Jika kamu merasa sulit untuk memahami apa yang saya katakan. kamu dapat menonton video tutorial lengkap pada program ini.

Dalam video, kamu telah melihat animasi tab menu yang dibuat hanya menggunakan HTML & CSS. Dan saya harap kamu dapat memahami kode dasar di balik pembuatan animasi ini. Ini adalah program CSS sederhana jadi jika kamu seorang pemula dalam mendesain web dan kamu mengetahui HTML & CSS dasar, maka kamu dapat dengan mudah memahami kode programnya.kamu dapat dengan mudah mendapatkan kode sumber dari program ini. kamu dapat menggunakan program ini pada proyek kamu dan bilah menu situs web.

tkutdcgutdkgfvjhvhjvjhvhvhhv