Membuat Tab Menu Dengan Css Murni
Pada kesempatan kali ini kita akan membuat Tabs
indikator dengan Html dan Css.
Sebuah Tab antarmuka adalah element kontrol grafis yang bisa di gunakan untuk mengisi beberapa panel atau dokumen pada bagian yang terpisah.
Dalam program ini pada halaman web terdapat kotak konten berupa Tab , dimana setiap Tab memiliki beberapa kontennya sendiri , Tab ini memiliki fungsi klik yang berarti ketika user mengklik pada Tab tertentu akan menampilkan konten itu sendiri atau aktif berupa Tab Slider.
Terutama disini saya mengontrol Tag Html <input type="radio"> dan <label>, jadi jika anda seorang pemula sekalipun dan tahu HTML CSS dasar akan sangat mudah membuatnya.
Ok Kita Langsung Ke Pengkodingannya
Pertama Buka terlebih dahulu teks editor kalian dan buat File.html
File.html
Sebuah Tab antarmuka adalah element kontrol grafis yang bisa di gunakan untuk mengisi beberapa panel atau dokumen pada bagian yang terpisah.
Dalam program ini pada halaman web terdapat kotak konten berupa Tab , dimana setiap Tab memiliki beberapa kontennya sendiri , Tab ini memiliki fungsi klik yang berarti ketika user mengklik pada Tab tertentu akan menampilkan konten itu sendiri atau aktif berupa Tab Slider.
Terutama disini saya mengontrol Tag Html <input type="radio"> dan <label>, jadi jika anda seorang pemula sekalipun dan tahu HTML CSS dasar akan sangat mudah membuatnya.
Ok Kita Langsung Ke Pengkodingannya
Pertama Buka terlebih dahulu teks editor kalian dan buat File.html
File.html
<!DOCTYPE html>
<!-- Created By Desaincode - www.desaincode.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Pure CSS Tabs Design | Desaincode</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<header>Pure CSS Tabs</header>
<input type="radio" name="slider" checked id="home">
<input type="radio" name="slider" id="blog">
<input type="radio" name="slider" id="code">
<input type="radio" name="slider" id="help">
<input type="radio" name="slider" id="about">
<nav>
<label for="home" class="home"><i class="fas fa-home"></i>Home</label>
<label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
<label for="code" class="code"><i class="fas fa-code"></i>Code</label>
<label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
<label for="about" class="about"><i class="far fa-user"></i>About</label>
<div class="slider"></div>
</nav>
<section>
<div class="content content-1">
<div class="title">This is a Home content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero aspernatur nobis provident dolores molestias quia quisquam laborum, inventore quis, distinctioa, fugit repudiandae delectus sunt ipsam! Odio illo at quia doloremque fugit iops, asperiores? Consectetur esse officia labore voluptatum blanditiis molestias dic voluptas est, minima unde sequi, praesentium dicta suscipit quisquam iure sed, nemo.</p>
</div>
<div class="content content-2">
<div class="title">This is a Blog content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit amet. Possimus doloris nesciunt mollitia culpa sint itaque, vitae praesentium assumenda suscipit fugit doloremque adipisci doloribus, sequi facere itaque cumque accusamus, quam molestias sed provident quibusdam nam deleniti. Autem eaque aut impedit eo nobis quia, eos sequi tempore! Facere ex repellendus, laboriosam perferendise. Enim quis illo harum, exercitationem nam totam fugit omnis natus quam totam, repudiandae dolor laborum! Commodi?</p>
</div>
<div class="content content-3">
<div class="title">This is a Code content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, debitis nesciunt! Consectetur officiis, libero nobis dolorem pariatur quisquam temporibus. Labore quaerat neque facere itaque laudantium odit veniam consectetur numquam delectus aspernatur, perferendis repellat illo sequi excepturi quos ipsam aliquid est consequuntur.</p>
</div>
<div class="content content-4">
<div class="title">This is a Help content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit null itaq, odio repellat asperiores vel voluptatem magnam praesentium, eveniet iure ab facere officiis. Quod sequi vel, rem quam provident soluta nihil, eos. Illo oditu omnis cumque praesentium voluptate maxime voluptatibus facilis nulla ipsam quidem mollitia! Veniam, fuga, possimus. Commodi, fugiat aut ut quorioms stu necessitatibus, cumque laborum rem provident tenetur.</p>
</div>
<div class="content content-5">
<div class="title">This is a About content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia sequi aliquam. Voluptatem distinctio nemo culpa veritatis nostrum fugit rem adipisci ea ipsam, non veniam ut aspernatur aperiam assumenda quis esse soluta vitae, placeat quasi. Iste dolorum asperiores hic impedit nesciunt atqu, officia magnam commodi iusto aliquid eaque, libero.</p>
</div>
</section>
</div>
</body>
</html>
Lalu tambahkan File.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
padding: 0 20px;
background: #17a2b8;
overflow-y: scroll
}
::selection{
background: rgba(23,162,184,0.3);
}
.wrapper{
max-width: 700px;
width: 100%;
margin: 200px auto;
padding: 25px 30px 30px 30px;
border-radius: 5px;
background: #fff;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 30px;
font-weight: 600;
padding-bottom: 20px;
}
.wrapper nav{
position: relative;
width: 80%;
height: 50px;
display: flex;
align-items: center;
}
.wrapper nav label{
display: block;
height: 100%;
width: 100%;
text-align: center;
line-height: 50px;
cursor: none;
position: relative;
z-index: 1;
color: #17a2b8;
font-size: 17px;
border-radius: 5px;
margin: 0 5px;
transition: all 0.3s ease;
}
.wrapper nav label:hover{
background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
#about:checked ~ nav label.about{
color: #fff;
}
nav label i{
padding-right: 7px;
}
nav .slider{
position: absolute;
height: 100%;
width: 20%;
left: 0;
bottom: 0;
z-index: 0;
border-radius: 5px;
background: #17a2b8;
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#blog:checked ~ nav .slider{
left: 20%;
}
#code:checked ~ nav .slider{
left: 40%;
}
#help:checked ~ nav .slider{
left: 60%;
}
#about:checked ~ nav .slider{
left: 80%;
}
@media(max-width:480px){
#blog:checked ~ nav .slider{
left: 25%
}
#code:checked ~ nav .slider{
left: 48%
}
#help:checked ~ nav .slider{
left: 70%
}
#about:checked ~ nav .slider{
left: 93.5%
}
}
section .content{
display: none;
background: #fff;
}
#home:checked ~ section .content-1,
#blog:checked ~ section .content-2,
#code:checked ~ section .content-3,
#help:checked ~ section .content-4,
#about:checked ~ section .content-5{
display: block;
}
section .content .title{
font-size: 21px;
font-weight: 500;
margin: 30px 0 10px 0;
}
section .content p{
text-align: justify;
}
Selesai, dan lihat hasilnya
Belum ada Komentar
Posting Komentar