Hello coders! Today, we’re going to explore the Magic Navigation Menu 4 using just HTML, CSS, and a dash of JavaScript. No need for complex tools or external libraries – just some good coding vibes!
In this tutorial, we’re not just creating a navigation menu; we’re making it a bit magical. Perfect for beginners and those looking to spice up their websites without any fuss.
We’ll use the simplicity of HTML and CSS combined with a touch of JavaScript to make a navigation menu that’s not only functional but also a bit enchanting.
So, if you’re up for a simple coding adventure that adds a hint of magic to your website, this tutorial is for you. Let’s dive into the code, keep it straightforward, and create a navigation menu that’s both easy and charming.
Ready to make your website a bit more magical? Let’s start coding!
HTML :
The given HTML code represents a navigation menu with icons using the Ionicons library. It consists of a list of menu items, each containing an icon and text. The active menu item is highlighted with a different style. The navigation menu is visually enhanced with an indicator element. The Ionicons library is included to provide the necessary icons.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Magic Navigation menu 4</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person-outline"></ion-icon>
</span>
<span class="text">Profile</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
<span class="text">Messages</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="camera-outline"></ion-icon>
</span>
<span class="text">Photos</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text">Settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
<!-- partial -->
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script><script src="./script.js"></script>
</body>
</html>CSS :
The given CSS code styles the navigation menu. It sets the font family to “Poppins” and applies some basic styles to the body. The navigation menu container has a fixed width and height with a background color and border radius. The menu items are displayed horizontally and have a fixed width and height. The icons and text inside the menu items have different styles on hover and when active. The indicator element is positioned below the active menu item and has a rotating animation. The CSS code also includes styles to translate the indicator based on the active menu item.
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #282a36;
}
.navigation {
position: relative;
width: 400px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: #333;
border-radius: 10px;
}
.navigation ul {
position: relative;
display: flex;
width: 350px;
}
.navigation ul li {
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
}
.navigation ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
}
.navigation ul li a .icon {
position: relative;
display: block;
font-size: 1.5em;
line-height: 75px;
transition: 0.5s;
color: rgba(255, 255, 255, 0.5);
}
.navigation ul li:hover a .icon {
color: rgba(255, 255, 255, 1);
}
.navigation ul li.active a .icon {
transform: translateY(-8px);
color: #29fd53;
}
.navigation ul li a .text {
position: absolute;
opacity: 0;
font-weight: 600;
font-size: 0.5em;
color: #222327;
transition: 0.5s;
letter-spacing: 0.05em;
text-transform: uppercase;
transform: translateY(0px);
}
.navigation ul li.active a .text {
transform: translateY(13px);
opacity: 1;
}
.indicator {
position: absolute;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.indicator::before {
content: "";
position: absolute;
bottom: 13px;
width: 80%;
height: 14px;
background: #29fd53;
border-radius: 10px;
}
.indicator::after {
content: "";
position: absolute;
top: -3px;
width: 7.5px;
height: 7.5px;
border-radius: 50%;
background: #333;
box-shadow: 0 0 0 2px #29fd53, 50px 50px #29fd53, 40px 0 #29fd53,
0 40px #29fd53;
transform: rotate(45deg);
animation: animate 2s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
transform: rotate(35deg);
}
50% {
transform: rotate(55deg);
}
}
.navigation ul li:nth-child(2).active ~ .indicator {
transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
transform: translateX(calc(70px * 4));
}JavaScript:
let list = document.querySelectorAll(".list");
function activeLink() {
list.forEach((item) => item.classList.remove("active"));
this.classList.add("active");
}
list.forEach((item) => item.addEventListener("click", activeLink));In a nutshell, we’ve successfully built Magic Navigation Menu 4 in this blog post. Using HTML, CSS, and a bit of JavaScript, we created a simple yet magical navigation experience. Whether you’re a beginner or an experienced coder, this tutorial aimed to keep things easy and charming. Now, armed with our new skills, let’s sprinkle a bit of magic on our websites.
If you face any issues with your project, don’t worry! You can grab the source code for this project by clicking the Download button. Ready to kick off your coding journey? Happy coding!
