This content originally appeared on DEV Community and was authored by Jatin Sharma
In this article, we are going to make the navigation menu, but it will be in the verticle form, I'll recommend you to use this as the full page menu, we are not going to talk about how to toggle the hamburger and that stuff if you want me to explain that, then tell me in the comment section. I can cover that in a separate article. First Let's see what are we building-
Preview
Before we look at the whole code first let me give you an overview of some effects.
Glow Effect
As you can see the glow effect in the text when you hover on it. this can be achieved by the following CSS property-
text-shadow: 0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
Text Spaceing Effect
I've used the animation with the letter-spacing property. you can achieve that by the following code-
@keyframes animate {
from {
opacity: 0;
letter-spacing: 50px;
}
to {
opacity: 1;
letter-spacing: 5px;
}
}
HTML
<nav class="navbar">
<ul class="nav_list">
<!--....More Links...-->
<li>
<a href="#">
<p class="link">about</p>
<p class="hidden_link">about</p>
</a>
</li>
<!--....More Links...-->
</ul>
</nav>
In HTML we have the .navbar which wraps the whole navigation menu then we have the unordered list in which we have the li and inside that we have the anchor (a) tag which also contains the two paragraphs (p) tag one is the bigger one (.link) and the other one is hidden (.hidden_link) which will only be visible on hover.
CSS
/* Default values */
* {
margin: 0;
padding : 0;
}
ul > li {
list-style: none;
}
a {
text-decoration: none;
}
/* Relative navigation list item */
.nav_list > li {
position: relative;
margin: 8px 0;
}
.nav_list > li > a {
color: #fff;
text-align: center;
}
.nav_list > li > a p {
text-transform: uppercase;
}
.nav_list > li > a > .link {
font-size: 2rem;
transition: opacity 300ms ease-in-out;
}
.nav_list > li > a .hidden_link {
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
transform: translate(-50%, -40%);
color: #fff;
background: transparent;
text-align: center;
text-shadow: 0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
/* animation "from" */
opacity: 0;
letter-spacing: 50px;
pointer-events: none;
}
/* Low opacity of main Link */
.nav_list > li > a:hover > .link {
opacity: 0.3;
}
/* Show the Hidden link with animation */
.nav_list > li > a:hover > .hidden_link {
animation: show-link 400ms ease-in-out forwards;
}
@keyframes show-link {
to {
opacity: 1;
letter-spacing: 5px;
pointer-events: all;
}
}
Recommended Device- Desktop/Laptop.
Conclusion
Now you can make this by yourself as well. you should now make the hamburger or the navigation toggle button and display this navbar. with some sliding animation maybe. If you have any queries or any suggestions comments section is always open.
You can now extend your support by buying me a Coffee.😊👇
Also Read
This content originally appeared on DEV Community and was authored by Jatin Sharma
Jatin Sharma | Sciencx (2021-12-11T09:58:44+00:00) Creative Hover Menu with CSS. Retrieved from https://www.scien.cx/2021/12/11/creative-hover-menu-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.