4.9K
Elastic tab animation navigation menus
Hello friends in this tutorial I am going to show you Elastic tab animation navigation menus using HTML and CSS. When you click every menu the background of the menu show behavior of elastic. Let’s see the below example.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Elastic tab animation navigation menus using HTML and CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="wrapper">
<nav>
<input type="radio" name="tab" id ="home" checked>
<input type="radio" name ="tab" id ="news">
<input type="radio" name ="tab" id ="blog">
<input type="radio" name ="tab" id ="contact">
<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="news" class="news"><a href="#"><i class="fas fa-newspaper"></i>News</a></label>
<label for="blog" class="blog"><a href="#"><i class="fas fa-blog"></i>Blog</a></label>
<label for="contact" class="contact"><a href="#"><i class="fas fa-envelope"></i>Contact</a></label>
<label for="about" class="about"><a href="#"><i class="fas fa-user"></i>About</a></label>
<div class="tab"></div>
</nav>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}
.wrapper{
height: 60px;
width: 1000px;
margin: auto;
line-height: 60px;
border-radius: 50px;
box-shadow: 0 5px 10px rgba(0,0,0,0.25);
margin-top: 100px;
}
.wrapper nav{
position: relative;
display: flex;
background: #262626;
border-radius: 50px;
}
.wrapper nav label{
flex: 1;
z-index: 1;
width: 100%;
cursor: pointer;
}
.wrapper nav label a{
position: relative;
z-index: -1;
font-size: 20px;
color: #fff;
font-weight: 600;
text-decoration: none;
transition: color 0.6s ease;
text-transform: uppercase;
}
#home:checked ~ label.home a,
#news:checked ~ label.news a,
#blog:checked ~ label.blog a,
#contact:checked ~ label.contact a,
#about:checked ~ label.about a{
color: #fff;
}
nav label a i{
font-size: 25px;
margin: 0 10px;
}
.tab{
position: absolute;
height: 100%;
width: 20%;
left: 0;;
bottom: 0;
z-index: 0;
border-radius: 50px;
background: linear-gradient(45deg, #7b8e94 0%, #8200f4 100%);
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#news:checked ~ .tab{
left: 20%;
}
#blog:checked ~ .tab{
left: 40%;
}
#contact:checked ~ .tab{
left: 60%;
}#about:checked ~ .tab{
left: 80%;
}
nav input{
display: none;
}
For More Tutorials Please Click Here
