Tab Bar Design Using HTML,CSS and JavaScript

Tab Bar Design Using HTML,CSS and JavaScript

Tab Bar Design Using HTML, CSS and JavaScript

Tab Bar Design Using HTML,CSS and JavaScript
Tab Bar Design Using HTML,CSS and JavaScript

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Tab Bar Design. We use Html, Css, and JavaScript for this Tab Bar Design.

I hope you enjoy our blog so let’s start with a basic html structure for a Tab Bar Design.

HTML Code For Tab Bar Design

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fancy tab bar animation</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="frame">
        <ul class="tabbar">
            <li class="active">
                <a href="" class="box">
                    <div>
                        <svg>
                            <use xlink:href="#box">
                        </svg>
                        <em></em>
                    </div>
                </a>
            </li>
            <li>
                <a href="" class="home">
                    <div>
                        <svg>
                            <use xlink:href="#home">
                        </svg>
                    </div>
                </a>
            </li>
            <li>
                <a href="" class="calendar">
                    <div>
                        <svg>
                            <use xlink:href="#calendar">
                        </svg>
                        <em></em>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="box">
            <path d="M4.2715356,6.86557078 C3.79533783,7.1301251 3.5,7.63205601 3.5,8.1768067 L3.5,15.8231933 C3.5,16.367944 3.79533783,16.8698749 4.2715356,17.1344292 L11.2715356,21.0233181 C11.7245694,21.2750036 12.2754306,21.2750036 12.7284644,21.0233181 L19.7284644,17.1344292 C20.2046622,16.8698749 20.5,16.367944 20.5,15.8231933 L20.5,8.1768067 C20.5,7.63205601 20.2046622,7.1301251 19.7284644,6.86557078 L12.7284644,2.97668189 C12.2754306,2.72499645 11.7245694,2.72499645 11.2715356,2.97668189 L4.2715356,6.86557078 Z"></path>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="home">
            <path d="M3.66781808,10.0753614 C3.5610739,10.1702451 3.5,10.3062472 3.5,10.4490661 L3.5,20 C3.5,20.8284271 4.17157288,21.5 5,21.5 L19,21.5 C19.8284271,21.5 20.5,20.8284271 20.5,20 L20.5,10.4490661 C20.5,10.3062472 20.4389261,10.1702451 20.3321819,10.0753614 L12.9965458,3.55479593 C12.4282167,3.04961457 11.5717833,3.04961457 11.0034542,3.55479593 L3.66781808,10.0753614 Z"></path>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="calendar">
            <path d="M5,4.5 C4.17157288,4.5 3.5,5.17157288 3.5,6 L3.5,19 C3.5,19.8284271 4.17157288,20.5 5,20.5 L19,20.5 C19.8284271,20.5 20.5,19.8284271 20.5,19 L20.5,6 C20.5,5.17157288 19.8284271,4.5 19,4.5 L5,4.5 Z"></path>
        </symbol>
    </svg>
    <!-- dribbble -->
    <a class="dribbble" href="https://dribbble.com/shots/7030278-Tab-bar-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>

</html>
There is all the html code for the Tab Bar Design. Now, you can see output without Css and JavaScript. then we write Css and JavaScript for the Tab Bar Design.

Output

 

Tab Bar Design Using HTML,CSS and JavaScript
Tab Bar Design Using HTML,CSS and JavaScript

CSS Code For Tab Bar Design

.tabbar {
--primary: #275efe;
--background: #fff;
--icon-active: #fff;
--x: 64px;
width: 100%;
margin: 0;
padding: 0 16px;
border-radius: 0 0 28px 28px;
list-style: none;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--background);
}
.tabbar:before, .tabbar:after {
content: '';
position: absolute;
left: 0;
border-radius: 50%;
transform: translateX(var(--x));
}
.tabbar:before {
width: 64px;
height: 64px;
margin-left: -32px;
background: var(--primary);
top: -16px;
z-index: 1;
}
.tabbar:after {
width: 84px;
height: 84px;
margin-left: -42px;
background: rgba(255, 255, 255, .08);
top: -26px;
}
.tabbar li a {
display: block;
padding: 24px 0;
backface-visibility: hidden;
transition: transform 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.tabbar li a div {
--y: 0;
width: 32px;
height: 32px;
margin: 0 auto;
position: relative;
z-index: 1;
backface-visibility: hidden;
transform: translateY(var(--y));
}
.tabbar li a div svg {
display: block;
width: 32px;
height: 32px;
fill: rgba(255, 255, 255, 0);
stroke-width: 1px;
stroke: var(--primary);
}
.tabbar li a div:before {
--s-x: 1;
--s-y: 1;
content: '';
display: block;
position: absolute;
z-index: 1;
transform: scaleX(var(--s-x)) scaleY(var(--s-y));
}
.tabbar li a.box div:before {
--s-x: 0.75;
left: 50%;
margin-left: -1px;
width: 2px;
height: 12px;
bottom: 4px;
border-radius: 1px;
background: var(--primary);
}
.tabbar li a.box div em {
--s-x: 1;
--s-y: 1;
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
.tabbar li a.box div em:before, .tabbar li a.box div em:after {
--r: 0deg;
content: '';
display: block;
height: 2px;
border-radius: 1px;
width: 13px;
background: var(--primary);
position: absolute;
bottom: -1px;
transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
}
.tabbar li a.box div em:before {
--r: 30deg;
right: -1px;
transform-origin: 100% 50%;
}
.tabbar li a.box div em:after {
--r: -30deg;
left: -1px;
transform-origin: 0% 50%;
}
.tabbar li a.home div:before {
--s-x: 0.75;
--s-y: 0.75;
border: 2px solid var(--primary);
border-bottom: 0;
width: 12px;
height: 17px;
border-radius: 2px 2px 0 0;
left: 50%;
bottom: 1px;
margin-left: -6px;
transform: scale(0.75);
}
.tabbar li a.calendar div:before {
--s-y: 0.75;
height: 2px;
width: 22px;
background: var(--primary);
left: 50%;
top: 12px;
margin-left: -11px;
}
.tabbar li a.calendar div em {
display: block;
position: absolute;
top: 3px;
left: 50%;
}
.tabbar li a.calendar div em:before, .tabbar li a.calendar div em:after {
content: '';
display: block;
width: 2px;
border-radius: 1px;
height: 7px;
background: var(--primary);
position: absolute;
top: 0;
backface-visibility: hidden;
transform: scaleX(0.75);
transition: background 0.4s ease;
}
.tabbar li a.calendar div em:before {
right: -6px;
}
.tabbar li a.calendar div em:after {
left: -6px;
}
.tabbar li.active a div {
--y: -24px;
}
.tabbar li.active a div svg {
fill: var(--icon-active);
}
.tabbar li.active a.calendar em:before, .tabbar li.active a.calendar em:after {
background: var(--icon-active);
}
.tabbar li:not(.active) a div {
transition: transform 0.4s ease;
}
.tabbar li:not(.active) a div svg {
transition: fill 0.4s ease;
}
.tabbar li:not(.active) a:active {
transform: scale(0.92);
}
.tabbar li.move a div {
animation: icon 1.2s linear forwards;
}
.tabbar li.move a div svg {
animation: svg 1.2s linear forwards;
}
.tabbar li.move a.box div:before {
animation: element-far 1.2s linear forwards;
}
.tabbar li.move a.box div em {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.home div:before {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div:before {
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div em {
animation: calendar-2 1.2s linear forwards;
}
.tabbar li.move a.calendar div em:before, .tabbar li.move a.calendar div em:after {
animation: calendar-3 1.2s linear forwards;
}
.tabbar.move:before {
animation: move 1.2s linear forwards;
}
.tabbar.move:after {
animation: move-after 1.2s linear forwards;
}
.frame {
width: 320px;
height: 240px;
border-radius: 0 0 28px 28px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
@keyframes move {
10%, 15% {
transform: translate(var(--x), 84px);
}
30% {
transform: translate(var(--x-n), 84px);
}
42%, 70% {
transform: translate(var(--x-n), -16px);
}
85% {
transform: translate(var(--x-n), 4px);
}
100% {
transform: translate(var(--x-n), 0);
}
}
@keyframes move-after {
10%, 15% {
transform: translate(var(--x), 84px) scale(0.82);
}
30% {
transform: translate(var(--x-n), 84px) scale(0.82);
}
42% {
transform: translate(var(--x-n), -16px) scale(0.82);
}
60% {
transform: translate(var(--x-n), -16px) scale(1);
}
70% {
transform: translate(var(--x-n), -16px) scale(1);
}
85% {
transform: translate(var(--x-n), 4px) scale(1);
}
100% {
transform: translate(var(--x-n), 0) scale(1);
}
}
@keyframes icon {
30% {
transform: translateY(0px);
}
40%, 70% {
transform: translateY(-100px);
}
85% {
transform: translateY(-20px);
}
100% {
transform: translateY(-24px);
}
}
@keyframes svg {
30% {
fill: rgba(255, 255, 255, 0);
transform: translateY(0);
}
40% {
fill: rgba(255, 255, 255, 0);
transform: translateY(-36px);
}
70% {
fill: rgba(255, 255, 255, 0);
transform: translateY(-56px);
}
80% {
fill: rgba(255, 255, 255, 0);
}
85% {
fill: var(--icon-active);
transform: translateY(0);
}
100% {
fill: var(--icon-active);
transform: translateY(0);
}
}
@keyframes element-close {
30% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
40% {
transform: translateY(-16px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
70% {
transform: translateY(-28px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
85% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
100% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
}
@keyframes element-far {
30% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
40% {
transform: translateY(-4px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
70% {
transform: translateY(-12px) scaleX(var(--s-x)) scaleY(var(--s-y));
}
85% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
100% {
transform: translateY(0) scaleX(var(--s-x)) scaleY(var(--s-y));
}
}
@keyframes calendar-2 {
30% {
transform: translateY(0);
}
40% {
transform: translateY(0px);
}
70% {
transform: translateY(-8px);
}
85% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes calendar-3 {
75% {
background: var(--primary);
}
80%, 100% {
background: var(--icon-active);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #242836;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}

Here is our updated output HTML + CSS.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

Tab Bar Design Using HTML,CSS and JavaScript
Tab Bar Design Using HTML,CSS and JavaScript

JavaScript Code For Tab Bar Design

Note: Use jQuery CDN link otherwise tab bar not working because we use jQuery Code👇.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Paste this Cdn link Befor Body tag end of and use this jQuery Code in JavaScript File.

$('.tabbar li a').on('click', function(e) {

    e.preventDefault();

    let that = $(this),
        li = that.parent(),
        ul = li.parent();

    if(!ul.hasClass('move') && !li.hasClass('active')) {
        ul.children('li').removeClass('active');

        ul.css('--x-n', li.position().left + li.outerWidth() / 2 + 'px');
        li.addClass('move');
        ul.addClass('move');

        setTimeout(() => {
            ul.removeClass('move');
            li.removeClass('move').addClass('active');
            ul.css('--x', li.position().left + li.outerWidth() / 2 + 'px');
        }, 1200);
    }

});

Final Output Of Tab Bar Design

in this preview here Scss but we use pure Css but the Output same as Scss

 

Now we have completed our Tab Bar Design. Here is our updated output with Html, Css, and JavaScript. Hope you like the Tab Bar Design. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Thank you!

In this post, we learn how to create a Tab Bar Design Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Codepen by – Aaron Iker



Leave a Reply