Hey friends,
Do check out the video tutorial for this tabs navbar on my YouTube channel and do subscribe for more!
<!--Created by CodingPorium,2022. Visit https://youtube.com/c/codingporium for more tutorials like this with free source code-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tabs Navigation Bar Animation using HTML,CSS & JS | CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/*set colours*/
:root{
--primary-color:#7611fa;
--secondary-color:#cea8ff;
}
/*Css Reset*/
*,*:after,*:before{
box-sizing: border-box;
}
/*Body*/
body{
font-family: poppins;
background-color: var(--secondary-color);
}
/*The outer container components*/
.container{
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.tabs{
display: flex;
position: relative;
background-color: #fff;
box-shadow: 0 0 1px rgba(24,94,224,0.15),0 6px 12px 0 rgba(24,94,225,0.15);
padding:0.75rem;
border-radius:99px;
}
.tabs *{
z-index: 2;
}
/*Remove the default radio button option*/
input[type="radio"]{
display: none;
}
/*Style the tabs*/
.tab{
display: flex;
align-items: center;
justify-content: center;
height:54px;
width:200px;
font-size:1.25rem;
font-weight: 500;
border-radius: 99px;
cursor:pointer;
transition: color 0.15s ease-in;
}
input[type="radio"]:checked + label{
color:var(--primary-color);
}
input[type="radio"]:checked + label > .notification{
background-color: var(--primary-color);
color:#fff;
}
/*Enable the sliding effect*/
input[id="radio1"]:checked ~ .slide{
transform: translateX(0);
}
input[id="radio2"]:checked ~ .slide{
transform: translateX(100%);
}
input[id="radio3"]:checked ~ .slide{
transform: translateX(200%);
}
.slide{
position: absolute;
display: flex;
height: 54px;
width:200px;
background-color: var(--secondary-color);
z-index:1;
border-radius:99px;
transition: 0.25s ease-out;
}
@media (max-width:700px){
.tabs{
transform:scale(0.6);
}
}
</style>
<body>
<div class="container">
<div class="tabs">
<input type="radio" id="radio1" name="tabs" checked />
<label class="tab" for="radio1">YouTube</label>
<input type="radio" id="radio2" name="tabs" />
<label class="tab" for="radio2">Instagram</label>
<input type="radio" id="radio3" name="tabs" />
<label class="tab" for="radio3">Website</label>
<span class="slide"></span>
</div>
</div>
</body>
</html>
Thanks, do also follow me on Instagram for more!
Post a Comment