Animated Bottom Nav Bar | UI Design To HTML, CSS Using JS | Linear Gradient | Transition

Oct 19, 2024 | 0 comments

Creating a stylish bottom navigation bar can significantly enhance the user experience of your website. In this tutorial, I’ll walk you through building a simple yet visually appealing navigation bar using HTML, CSS, and JavaScript.

1. HTML Structure

The basic HTML structure consists of a div container that holds the navigation bar and four SVG icons representing menu items. Each icon will act as a clickable element, and a div slider will be used to visually indicate the selected menu item.

Here’s the HTML code:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Nav Bar | theuicode.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="nav">
<!-- SVG Icons -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="menu-1 icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Z" />
</svg>
<!-- Repeat for other icons -->
<div class="slider"></div> <!-- The sliding circle indicator -->
</div>
</div>
</body>
<script src="script.js"></script>
</html>

  • The container holds the entire bottom nav and centers it on the page.
  • The nav is the bottom navigation bar that holds the SVG icons.
  • The slider will be animated to move under the selected icon.

2. CSS Styling

The CSS handles the layout, appearance, and animation. Here’s how the styling works:

css
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #F3F3F4;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
width: 920px;
height: 650px;
background: radial-gradient(circle at center bottom, #3612C2 0%, #9D0073 100%);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: flex-end;
}

.nav {
background: #FFFDFF;
height: 150px;
width: 75%;
margin-bottom: 150px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
}

.icon {
height: 40px;
color: #C3C6CC;
cursor: pointer;
z-index: 1;
transition: margin-bottom .5s ease;
}

.slider {
background: #FFFDFF;
width: 150px;
height: 150px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
margin-top: -75px;
margin-left: -520px;
border-radius: 50%;
z-index: 0;
transition: margin-left .5s ease;
}

.slider::after {
content: '';
width: 100px;
height: 100px;
background: #E6258C;
border-radius: 50%;
}

  • Container: Positioned centrally with a background gradient.
  • Nav Bar: Styled with a white background, rounded corners, and flex alignment to distribute the icons.
  • Icons: Each icon has a transition effect for smooth animations when clicked.
  • Slider: A circular slider under the icons moves to highlight the active icon.

3. JavaScript for Interactivity

The JavaScript adds click functionality to the icons. When an icon is clicked, it moves the slider to that icon and changes its color and margin to indicate it’s selected.

javascript
const icons = document.querySelectorAll('.icon');
icons.forEach((icon, index) => {
icon.addEventListener('click', (event) => {
// Reset all icons
icons.forEach(i => {
i.style.marginBottom = '0';
i.style.color = '#C3C6CC';
});

// Highlight the clicked icon
icon.style.marginBottom = '60px';
icon.style.color = '#FFFDFF';

let left;
switch(index) {
case 0: left = "-520px"; break;
case 1: left = "-170px"; break;
case 2: left = "170px"; break;
case 3: left = "520px"; break;
}

// Move the slider
const slider = document.querySelector('.slider');
slider.style.marginLeft = left;
});
});

  • Icon Click: The script listens for clicks on any icon. When clicked, it adjusts the margin and color to show the active state.
  • Slider Animation: Based on the icon index, the slider’s marginLeft is adjusted, creating the sliding effect.

4. How the Slider Works

The slider div is centered on the page initially and then moves horizontally based on the clicked icon’s position. This is achieved by changing the marginLeft of the slider dynamically in the JavaScript code.

Conclusion

This bottom navigation bar is responsive, easy to implement, and stylish. It uses only a few lines of HTML, CSS, and JavaScript to create a smooth, animated interaction. Feel free to customize the icons, colors, and animation timings to suit your project!

Let me know if you have any questions in the comments below!

 

Related Posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *