DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Creative Hover Menu with CSS
Jatin Sharma
Jatin Sharma

Posted on • Updated on

Creative Hover Menu with CSS

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

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;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Recommended Device- Desktop/Laptop.


codepen

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.๐Ÿ˜Š๐Ÿ‘‡
buymecoffee

Also Read

Top comments (8)

Collapse
 
amircahyadi profile image
Amir-cahyadi

๐Ÿ‘โค๏ธ

Collapse
 
j471n profile image
Jatin Sharma

๐Ÿ‘

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice!

Collapse
 
j471n profile image
Jatin Sharma

:)

Collapse
 
jlozanom profile image
JLozanoM

Nice effect!

Collapse
 
papoel profile image
Pascal Briffard

๐Ÿ‘Œ โค

Collapse
 
motuncoded profile image
motuncoded

Kudos... Following your YouTube channel

Collapse
 
j471n profile image
Jatin Sharma

What?

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

โ†’ Join the Hackathon <-