Create a Stylish Menu Bar with HTML, CSS, and JavaScript
Creating a Stylish Menu Bar with HTML, CSS, and JavaScript
Welcome to GitCode Lab! In this tutorial, we will show you how to create a stylish menu bar using HTML, CSS, and JavaScript. This guide will include all the code you need, along with detailed explanations, so you can easily copy and use it for your projects.
HTML Structure
First, let's start with the HTML file. This file sets up the basic structure of our webpage, including a menu bar with several icons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Stylish Menu Bar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="menu-bar-container">
<div class="menu-bar">
<div class="menu-item">
<i class="fas fa-home"></i>
</div>
<div class="menu-item">
<i class="fas fa-calculator"></i>
</div>
<div class="menu-item">
<i class="fas fa-question"></i>
</div>
<div class="menu-item-selected">
<i class="fas fa-home"></i>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS Styling
Next, let's add some styles to make our menu bar look great. Here is the style.css file:
body {
margin: 0;
}
.menu-bar-container {
width: 100%;
position: fixed;
bottom: 40px;
display: flex;
justify-content: center;
}
.menu-bar-container .menu-bar {
width: 400px;
background: #042435;
color: #fff;
display: flex;
justify-content: space-between;
font-size: 24px;
padding: 0 36px;
border-radius: 24px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
.menu-bar-container .menu-item {
padding: 20px 12px;
cursor: pointer;
}
.menu-bar-container .menu-item-selected {
position: fixed;
height: 60px;
width: 60px;
background: #d61717;
border-radius: 50%;
display: grid;
place-items: center;
bottom: 60px;
border: 10px solid #fff;
transform: translateX(-50%);
transition: all 700ms cubic-bezier(0.79, -0.22, 0.37, 1.23);
}
JavaScript Functionality
Finally, let's add some JavaScript to make our menu bar interactive. Here is the main.js file:
const menuItemSelected = document.querySelector(
".menu-bar-container .menu-item-selected"
);
const menuItems = document.querySelectorAll(".menu-bar-container .menu-item");
const setMenuItemSelectedPosition = () => {
let menuItem = menuItems[0].getBoundingClientRect();
let xCenter = (menuItem.left + menuItem.right) / 2;
menuItemSelected.style.left = xCenter + "px";
};
menuItems.forEach((i) => {
i.addEventListener("click", () => {
menuItemSelected.innerHTML = i.innerHTML;
let menuItem = i.getBoundingClientRect();
let xCenter = (menuItem.left + menuItem.right) / 2;
menuItemSelected.style.left = xCenter + "px";
});
});
setMenuItemSelectedPosition();
Conclusion
That's it! You've now created a stylish and interactive menu bar using HTML, CSS, and JavaScript. You can copy and paste the code into your own project, customize it to fit your needs, and enjoy the enhanced navigation experience on your website.
Feel free to explore and modify the code to suit your style and functionality. Happy coding!
Ad Space
