Learn how to create a responsive and mobile-friendly bottom tab bar navigation using only HTML and CSS.
Table of Contents
Navigation is a crucial aspect of web design, and it plays a significant role in providing a seamless user experience. A well-designed navigation bar can make it easy for users to navigate through a website and find the content they're looking for. In this article, we'll be discussing how to create a pure CSS bottom tab bar navigation using HTML and CSS only.
Understanding Bottom Tab Bar Navigation
Bottom tab bar navigation is a type of navigation bar that is usually placed at the bottom of a web page. It consists of multiple tabs or buttons that represent different sections of a website. This type of navigation is becoming increasingly popular in web design due to its simplicity and ease of use. Bottom tab bar navigation is particularly useful for mobile devices since it takes up less screen real estate and can easily be reached with one hand. In addition, it is an excellent way to showcase the main sections of a website and provide a clear and concise way for users to navigate.
Let's start making an amazing bottom tab bar navigation Using HTML and Pure CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our bottom tab bar navigation menu.
The below HTML code defines a bottom tab bar navigation menu. Let's break down what each line means:
<!DOCTYPE html>: This is a declaration at the beginning of the HTML file that tells the web browser which version of HTML is being used. In this case, it's HTML5.
<html lang="en">: This is the opening tag of the HTML document, and it specifies that the document is in the English language.
<head>: This is the beginning of the document's head section, which contains meta-information about the document, such as the title, character set, and style sheets.
<title>Bottom Tab Bar Navigation</title>: This line sets the title of the document, which appears in the browser's title bar and can be used by search engines to describe the page.
<meta charset="UTF-8" />: This line sets the character encoding of the document to UTF-8, which allows for the use of special characters and symbols.
<meta name="viewport" content="width=device-width" />: This line sets the viewport meta tag, which is used to control the layout and scaling of the document on different devices.
<link rel="stylesheet" href="styles.css" />: This line links to an external style sheet file called "styles.css", which contains rules for the visual design of the document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">: This line links to an external style sheet file called "simple-line-icons.min.css", which contains a set of icons that can be used in the navigation menu.
<body>: This is the beginning of the document's body section, which contains the content that will be displayed in the browser window.
<nav class="menu">: This line defines a navigation menu with a class attribute of "menu".
<a class="nav-item" href="#"><i class="icon-home icons"></i><span class="tab-title">Home</span></a>: This line defines a navigation link with a class attribute of "nav-item" and a link to the "#" anchor. It contains an icon of a home and a text label "Home".
<input type="checkbox" name="" class="checkbox">: This line creates a checkbox input element that will be used to toggle the visibility of a list of navigation links.
<div class="checkbox-list">: This line defines a container for the list of navigation links that will be revealed when the checkbox is checked.
<a class="nav-item" href="#"><i class="icon-magnifier icons"></i><span class="tab-title">Search</span></a>: This line defines a navigation link with a class attribute of "nav-item" and a link to the "#" anchor. It contains an icon of a magnifying glass and a text label "Search".
<a class="nav-item" href="#"><i class="icon-bell icons"></i><span class="tab-title">Notifications</span></a>: This line defines a navigation link with a class attribute of "nav-item" and a link to the "#" anchor. It contains an icon of a bell and a text label "Notifications".
<a class="nav-item" href="#"><i class="icon-heart icons"></i><span class="tab-title">Favorites</span></a>: This line defines a navigation link with a class attribute of "nav-item" and a link to the "#" anchor. It contains an icon of a heart and the text label "Favorites".
</div>: This line closes the container for the list of navigation links.
<a class="nav-item" href="#"><i class="icon-user icons"></i><span class="tab-title">Your Profile</span></a>: This line defines a navigation link with a class attribute of "nav-item" and a link to the "#" anchor. It contains an icon of a user and a text label "Your Profile".
</nav>: This line closes the navigation menu container.
</body>: This line closes the body section of the document.
</html>: This line closes the HTML document.
The navigation menu is designed to have a fixed position at the bottom of the web page. The first navigation link is a home icon, and the remaining navigation links are hidden by default. When the user clicks on the checkbox, the hidden navigation links appear below the home icon. Each navigation link consists of an icon and a text label, and the entire link is clickable to take the user to a different page or section of the website. The external style sheets provide the visual design for the navigation menu, including the font, colors, and spacing of the elements.
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our bottom tab bar navigation menu using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the tab bar navigation is in place, the next step is to add styling to the tab bar navigation using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create tab bar navigation.
The body style rule sets the width of the page to 100% and the height to 100vh (viewport height), which ensures that the page takes up the full screen. The display property is set to flex, which allows for easy alignment of child elements. justify-content and align-items properties are used to center content both horizontally and vertically. The padding and margin are set to 0, and a background gradient is added.
The a style rule applies to all anchor tags and sets their text-decoration property to none, their font-family to sans-serif, their text-transform to lowercase, their font-size to 1.5em, and their color to a dark gray.
The menu style rule applies to a container element that includes a list of links, styled as tabs. The display property is set to flex with justify-content and align-items to arrange the tabs horizontally and vertically. The position property is set to relative to position the tabs inside the container. The width and height properties determine the size of the menu, while the padding and border-radius properties set the space between the tabs and the rounded corners of the container. A white background color and a box shadow effect are added.
The menu .nav-item style rule applies to the individual tabs within the menu container, and their position is set to relative. The .tab-title class of each tab is set to display:none, but when the .nav-item is hovered over, it appears with a black background and white text, and a small triangle pointing downward is created using the :before pseudo-element.
The .checkbox class applies to a checkbox input element that toggles the menu on and off. The element is styled with a white background color and made clickable by setting its cursor property to pointer. The :before and :after pseudo-elements are used to create a plus sign that appears when the checkbox is unchecked and a cross sign when the checkbox is checked. The checkbox is initially hidden with width and height properties set to 0.
When the checkbox is checked, the menu tabs slide down with the .nav-item style rule being modified with display:flex, align-items:center, and justify-content:center. Each tab is made circular, and its background color changes based on the tab's position. The text color changes to white and the tab title appears. The :after pseudo-element is rotated 45 degrees, and the checkbox's border and pseudo-elements are colored gray.
This will give our tab bar navigation an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
background: white;
background: linear-gradient(236deg, rgba(199, 152, 152, 0.817) 0%, #deaed4 100%);
}
a {
text-decoration: none;
font-family: sans-serif;
text-transform: lowercase;
font-size: 1.5em;
color: #222;
}
.menu {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
width: 500px;
height: 60px;
padding: 0 15px 15px;
border-radius: 10px 10px 30px 30px;
background-color: #fff;
box-shadow: 0px 6px 18px 0px #9f9f9f;
margin: 10px;
}
.menu .nav-item {
position: relative;
}
.menu .nav-item .tab-title {
display: none;
position: absolute;
top: -40px;
left: 50%;
transform: translate(-50%, 0);
font-size: 12px;
background: #222;
color: #fff;
padding: 5px;
border-radius: 5px;
width: max-content;
text-transform: capitalize;
}
.menu .nav-item .tab-title:before {
content: "";
position: absolute;
border-color: #222 transparent transparent transparent;
border-style: solid;
border-width: 6px;
width: 0px;
height: 0px;
bottom: -12px;
left: 50%;
transform: translate(-50%, 0);
}
.menu .nav-item:hover .tab-title {
display: block;
}
.menu .checkbox {
background-color: #fff;
cursor: pointer;
width: 0;
height: 0;
position: relative;
z-index: 1;
}
.menu .checkbox:before {
content: "";
width: 80px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
top: -30px;
left: 0;
position: absolute;
border-radius: 100%;
background-color: #ea4c89;
transition: all 0.2s linear;
border: 4px solid #fff;
}
.menu .checkbox:after {
content: "+";
position: absolute;
font-size: 4em;
color: #fff;
top: -30px;
left: 0;
transform: translate(-50%, -50%);
transition: all 0.1s linear;
}
.menu .checkbox:checked + * {
top: -100px;
transform: rotate(0deg);
}
.menu .checkbox:checked + * .nav-item {
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
aspect-ratio: 1;
position: absolute;
left: 0;
transform: translate(-50%, -15px);
}
.menu .checkbox:checked + * .nav-item:hover .tab-title {
display: block !important;
}
.menu .checkbox:checked + * .nav-item > i {
color: #fff;
display: block;
transition: all 0.5s linear;
}
.menu .checkbox:checked + * .nav-item:nth-child(1) {
background-color: #ff8182;
top: 0px;
left: -90px;
}
.menu .checkbox:checked + * .nav-item:nth-child(2) {
background-color: #c641ff;
left: 0;
top: -40px;
}
.menu .checkbox:checked + * .nav-item:nth-child(3) {
background-color: #631aee;
top: 0px;
left: 90px;
}
.menu .checkbox:checked:before {
background-color: #fff;
box-shadow: 0 0 10px #c7c7c7;
}
.menu .checkbox:checked:after {
transform: translate(-50%, -50%) rotate(45deg);
color: #6e6b83;
}
.menu .checkbox-list {
position: absolute;
top: 0;
display: block;
z-index: 0;
transform: rotate(-90deg) translate(0, -50%);
transition: all 0.1s linear;
}
.menu .checkbox-list .nav-item {
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
aspect-ratio: 1;
position: absolute;
transform: translate(15px, -50%);
transition: all 0.2s linear;
}
.menu .checkbox-list .nav-item .tab-title {
display: none;
}
.menu .checkbox-list .nav-item > i {
color: #fff;
display: block;
}
.menu .checkbox-list .nav-item:nth-child(1) {
background-color: #ff8182;
left: -72px;
}
.menu .checkbox-list .nav-item:nth-child(2) {
background-color: #c641ff;
left: -68px;
}
.menu .checkbox-list .nav-item:nth-child(3) {
background-color: #631aee;
left: -64px;
} Final Output:
Conclusion:
In conclusion, creating a pure CSS bottom tab bar navigation using HTML and CSS only is a great way to enhance your front-end development skills. It is a straightforward and effective way to provide a clear and concise way for users to navigate through a website. With this step-by-step guide, you can create your own navigation bar and experiment with different styles and effects. Remember to practice and have fun!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
