ADVERTISEMENT

Tabs Navigation Using HTML and CSS (Source Code)

Telegram Group Join Now

ADVERTISEMENT

Tabs Navigation Using HTML and CSS (Source Code)

Tabs Navigation Using HTML and CSS
Tabs Navigation Using HTML and CSS

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, We learn how to Create Tabs Navigation. We use HTML and CSS Only to create this Tabs Navigation Animation.

I hope you enjoy our blog so let’s start with a basic html structure for Tabs Navigation.

ADVERTISEMENT

HTML Code For Tabs Navigation

<div class="container">
<div class="tabs">
<input type="radio" id="radio-1" name="tabs" checked />
<label class="tab" for="radio-1">Home</label>
<input type="radio" id="radio-2" name="tabs" />
<label class="tab" for="radio-2">About</label>
<input type="radio" id="radio-3" name="tabs" />
<label class="tab" for="radio-3"> Contact Us</label>
<span class="glider"></span>
</div>
</div>

There is all the html code for the Tabs Navigation. Now, you can see output without CSS, then we write Css for styling and give animation on tabs change.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Output

Tabs Navigation Using HTML and CSS
Tabs Navigation Using HTML and CSS
Output

CSS Code For Tabs Navigation

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
:root {
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: rgba(230, 238, 249, 0.5);
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  border-radius: 99px;
}
.tabs * {
  z-index: 2;
}

input[type=radio] {
  display: none;
}

.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;
}

input[id=radio-1]:checked ~ .glider {
  transform: translateX(0);
}

input[id=radio-2]:checked ~ .glider {
  transform: translateX(100%);
}

input[id=radio-3]:checked ~ .glider {
  transform: translateX(200%);
}

.glider {
  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);
  }
}

We have completed our Tabs Navigation Project. Here is our final updated output HTML + CSS.

ADVERTISEMENT

Final Output Of Tabs Navigation Using HTML and CSS

 

Tabs Navigation Using HTML and CSS
Tabs Navigation Using HTML and CSS

 

ADVERTISEMENT

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

ADVERTISEMENT

We have completed our Tabs Navigation. Here is our updated output with HTML and CSS. I hope you like the Tabs Navigation. You can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create Tabs Navigation Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Tabs Navigation Using HTML and CSS (Source Code)”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT