Table of Contents

PreviewHTMLCSSConclusion

Creative Hover Menu with CSS

Jatin Sharma
Jatin Sharma
Dec 10, 2021
3 min read
528 words

In this article, we are going to make the navigation menu, but it will be in the article 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

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-

styles.css

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-

styles.css

@keyframes animate {
  from {
    opacity: 0;
    letter-spacing: 50px;
  }
  to {
    opacity: 1;
    letter-spacing: 5px;
  }
}

HTML

index.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

styles.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;
  }
}

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.

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: