How to create Bottom navbar with HTML and CSS
How to create Bottom navbar with HTML and CSS
Hello Friends, Today, In this post we about how to create an responsive and cool bottom Navigation bar with the help oh HTML and CSS.
So keep visiting my blog for more web site tool. also give some suggesion in the comment box for better content.
Thanks.......
Source From https://codepen.io/myacode/pen/PoqWmqL?editors=0010
HTML CODE : -
<div class="container">
<div class="bottom-nav">
<input type="radio" name="radio" value="1" id="tab-1" />
<label class="icon home" for="tab-1">
<ion-icon name="home-outline"></ion-icon>
<ion-icon class="fill" name="home"></ion-icon>
</label>
<input type="radio" name="radio" value="2" id="tab-2" checked/>
<label class="icon cart" for="tab-2">
<ion-icon name="cart-outline"></ion-icon>
<ion-icon class="fill" name="cart"></ion-icon>
</label>
<input type="radio" name="radio" value="3" id="tab-3" />
<label class="icon fav" for="tab-3">
<ion-icon name="heart-outline"></ion-icon>
<ion-icon class="fill" name="heart"></ion-icon>
</label>
<input type="radio" name="radio" value="4" id="tab-4" />
<label class="icon profile" for="tab-4">
<ion-icon name="person-outline"></ion-icon>
<ion-icon class="fill" name="person"></ion-icon>
</label>
</div>
</div>
CSS Code :-
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
overflow-y: scroll;
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #c988f8;
transition: background 0.4s ease;
}
.bottom-nav {
background: #fff;
width: 48rem;
height: 12rem;
border-radius: 0 0 3rem 3rem;
box-shadow: 0 0.4rem 1rem 0 rgba(55, 55, 55, 0.2);
padding: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
}
.bottom-nav input {
display: none;
}
.bottom-nav label {
cursor: pointer;
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
color: #b5c4da;
z-index: 200;
position: relative;
}
.bottom-nav label::before {
content: "";
position: absolute;
width: 7rem;
height: 7rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.bottom-nav ion-icon {
font-size: 3.5rem;
color: inherit;
}
.bottom-nav input:checked + .home {
color: #ff90b5;
}
.bottom-nav input:checked + .home > ion-icon:first-child {
opacity: 0;
}
.bottom-nav input:checked + .home::before {
background: #ffdfea;
transform: scale(1);
}
.bottom-nav input:checked + .cart {
color: #A439F1;
}
.bottom-nav input:checked + .cart > ion-icon:first-child {
opacity: 0;
}
.bottom-nav input:checked + .cart::before {
background: #d9bcee;
transform: scale(1);
}
.bottom-nav input:checked + .fav {
color: #00d1c7;
}
.bottom-nav input:checked + .fav > ion-icon:first-child {
opacity: 0;
}
.bottom-nav input:checked + .fav::before {
background: #c3eeec;
transform: scale(1);
}
.bottom-nav input:checked + .profile {
color: #ffc460;
}
.bottom-nav input:checked + .profile > ion-icon:first-child {
opacity: 0;
}
.bottom-nav input:checked + .profile::before {
background: #ffebc7;
transform: scale(1);
}
.bottom-nav input:checked + label .fill {
transform: scale(1);
opacity: 1;
}
.fill {
position: absolute;
left: 0.8rem;
transform: scale(0);
opacity: 0;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
JavaScript Code :-
$('label').on("click",function() {
$index = $(this).prevAll().length;
if($index === 1) {
$('.container').css('background', '#ffa6c3');
} else if($index === 3) {
$('.container').css('background', '#c988f8');
} else if($index === 5) {
$('.container').css('background', '#7ce2dd');
} else {
$('.container').css('background', '#ffd284');
}
});
Post a Comment