Telegram Group Join Now
ADVERTISEMENT
Tabs Navigation Using HTML and CSS (Source Code)
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
|
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
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
ADVERTISEMENT
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….