The theme for week #3 of the Weekly Coding Challenge is:
Navigation
A navigation component is crucial on a website because you want your users be able to easily navigate through your pages. You can find a navigation component even on single page websites thatâll allow you to jump to a certain section on the page. So as a developer is very useful to know how to build this kind of component.
In this article I decided to build a Tab Bar Navigation, but you can build any kind of navigation you want.
I was inspired by this design made by Aurelien Salomon. Here is what the final result of what weâre going to build will look like:
https://codepen.io/FlorinPop17/pen/ZZajGB/
The HTML
The HTML structure is going to be simple. Weâll have a .tab-nav-container
and four .tab
s within it:
<div class="tab-nav-container">
<div class="tab active purple">
<i class="fas fa-home"></i>
<p>Home</p>
</div>
<div class="tab pink">
<i class="far fa-heart"></i>
<p>Likes</p>
</div>
<div class="tab yellow">
<i class="fas fa-search"></i>
<p>Search</p>
</div>
<div class="tab teal">
<i class="far fa-user"></i>
<p>Profile</p>
</div>
</div>
As you can see, each .tab
has an icon (from FontAwesome), the corresponding text and some extra classes that will be used to give each tab specific background-color
and color
properties. Also the .active
class, which will be used to style the active tab. Obvious, right? đ
The CSS
First, letâs style the .tab-nav-container
:
.tab-nav-container {
background-color: #fff;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
display: flex;
justify-content: space-between;
padding: 30px;
width: 450px;
}
Note: we have a fixed
width on the container as we donât want it to change itâs size when we change the active .tab
since each tab might have a text thatâs either longer or shorter in size (e.g. Home (4 letters) vs Profile (6 letters)).
We are using flexbox
to distribute the .tab
s evenly inside the container. Other than that I believe that the CSS is pretty self-explanatory.
Next⌠The .tab
s styling:
.tab {
background-color: #ffffff;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
margin: 0 10px;
transition: background 0.4s linear;
}
.tab i {
font-size: 1.2em;
}
.tab p {
font-weight: bold;
overflow: hidden;
max-width: 0;
}
.tab.active p {
margin-left: 10px;
max-width: 200px;
transition: max-width 0.4s linear;
}
.tab.active.purple {
background-color: rgba(91, 55, 183, 0.2);
color: rgba(91, 55, 183, 1);
}
.tab.active.pink {
background-color: rgba(201, 55, 157, 0.2);
color: rgba(201, 55, 157, 1);
}
.tab.active.yellow {
background-color: rgba(230, 169, 25, 0.2);
color: rgba(230, 169, 25, 1);
}
.tab.active.teal {
background-color: rgba(28, 150, 162, 0.2);
color: rgba(28, 150, 162, 1);
}
Few things to note here:
- In order to have a smooth transition when we change the
.active
tab, we are setting atransition: background
property to the.tab
class - By default the
p
tag inside the.tab
has amax-width
of0
and itâsoverflow
property set tohidden
. This is because we only want to show the text only when the.tab
is active - We are using the custom color classes (
.purple
,.pink
, etc) to have different colors in the tabs
Letâs make sure it looks good on mobile too:
@media (max-width: 450px) {
.tab-nav-container {
padding: 20px;
width: 350px;
}
.tab {
padding: 0 10px;
margin: 0;
}
.tab i {
font-size: 1em;
}
}
As you can see, we are shrinking the .tab-nav-container
when the max-width of the viewport is 450px
and we are also reducing the padding to make it look smaller. :+1:
The JavaScript
At the end, in JS we have to make sure that when the user clicks another .tab
the .active
class is added to it and removed from the previous active .tab
:
// Get all the tabs
const tabs = document.querySelectorAll('.tab');
tabs.forEach(clickedTab => {
// Add onClick event listener on each tab
clickedTab.addEventListener('click', () => {
// Remove the active class from all the tabs (this acts as a "hard" reset)
tabs.forEach(tab => {
tab.classList.remove('active');
});
// Add the active class on the clicked tab
clickedTab.classList.add('active');
});
});
Conclusion
This kind of tab bar navigation is mostly used on mobile devices so if you want to reuse it for a mobile app make sure that you position the container to the bottom of the screen (with position: fixed
) and you recalculate the width to fill in the entire screenâs width.
In the Codepen example weâre also changing the background color of the body when another tab is clicked. This is just for visual purposes and itâs not exactly related to the Coding Theme of this week. But if you want to see how I did that, check out the JS code in the pen (just 2 extra lines of code).
More examples for this Coding Challenge
In a previous article I demonstrated how to build a responsive navigation menu. You can check it out too if you want to build something like that :wink:.
Also if you havenât, make sure you read the Weekly Coding Challenge ârulesâ if you want to participate in the Challenge! And why wouldnât you? Itâs a great way to improve your coding skills! đ
Happy coding! đ