Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
In this tutorial topic "Animated Css Menu Indicator | CSS Navigation Hover Effects", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, go to Font Awesome and embed their cdnjs library link to your main file
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hovering Cards</title>
</head>
<body>
<ul>
<li><i class="fa fa-bars fa-lg"></i></li>
<li><i class="fa fa-user fa-lg"></i></li>
<li><i class="fa fa-plus-circle fa-lg"></i></li>
<li><i class="fa fa-cog fa-lg"></i></li>
<li><i class="fa fa-comment fa-lg"></i></li>
<div class="marker"></div>
</ul>
</body>
</html>
body {
min-height: 100vh;
margin: 0;
background: #1e2759;
display: flex;
justify-content: center;
align-items: center;
}
ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 25px #00000040;
padding: 0;
list-style: none;
}
li {
position: relative;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 20px 30px;
z-index: 1000;
backdrop-filter: blur(15px);
cursor: pointer;
}
.fa {
pointer-events: none;
opacity: 0.25;
transition: 0.25s;
}
.marker {
position: absolute;
top: 0;
transition: 0.5s;
z-index: 1;
}
.marker::before {
--c: #5da6ff;
content: "";
width: 50px;
height: 20px;
position: absolute;
background: var(--c);
top: -10px;
left: 50%;
transform: translate(-50%);
border-radius: 8px;
box-shadow: 0 0 15px var(--c),
0 0 30px var(--c),
0 0 45px var(--c),
0 0 60px var(--c);
}
li:nth-child(1):hover ~ .marker::before {
--c: #5da6ff;
}
li:nth-child(2):hover ~ .marker::before {
--c: #ff0;
}
li:nth-child(3):hover ~ .marker::before {
--c: #0f0;
}
li:nth-child(4):hover ~ .marker::before {
--c: #df2fff;
}
li:nth-child(5):hover ~ .marker::before {
--c: #ff308f;
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
<script>
const marker = document.querySelector(".marker"),
list = document.querySelectorAll("ul li");
list.forEach(li => li.addEventListener("mouseover", e => {
marker.style.left = li.offsetLeft + "px";
marker.style.width = li.offsetWidth + "px";
document.querySelector(".active").classList.remove("active");
li.classList.add("active")
}))
</script>
0 Comments
We are happy to hear from you.