Free Coding Ebook 👉 Get Now
Tabs Navigation Using HTML and CSS (Source Code)
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.
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>
ADVERTISEMENT
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.
Portfolio Website using HTML and CSS (Source Code)
Output
|
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.
Final Output Of Tabs Navigation Using HTML and CSS
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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
guys thanks for this codes… it is really very very helpful for me..
great codes … it is very important for my next project bro…
a big thanks from small fan bro… it is really a great code.. i definetly going to use it on my next project…
bro, thanks a lot, this is the code i need in my projects….
thanks for sharing it bro…
thanks for this
thanks for sharing this codes
thanks for this tab navigation code bro….