Creative Hover Menu with CSS

#css #webdev #tutorial #beginners

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.