Css how to Html

Animated Menu Using only CSS Pseudo Elements

aimated-menu-using css
Written by csshint

In this post we are going to show you how to create a Animated Menu Using only CSS Pseudo Elements.
these effects can make your site feel much more attaractive. you can use this effects in your projects.

The structure of markup is very simple. Create a navigation ul li that will have our all the list.

<div class="nav">
 <ul>
   <li class="home"> <a href="#" data-glitch-text="Home"> Home </a></li>
   <li class="tutorials"> <a href="#" data-glitch-text="tutorials"> tutorials </a></li>
   <li class="About"> <a href="#" data-glitch-text="About"> About </a></li>
   <li class="Newsletter"> <a href="#" data-glitch-text="Newsletter"> Newsletter </a></li>
   <li class="Contact"> <a href="#" data-glitch-text="Contact"> Contact </a></li>  
 </ul> 
</div>

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles.


/*--first include your font--*/  
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

*{
    margin:0px;
    padding:0px;
}

.nav ul {
      list-style:none;
      background-color:#000;
      text-align:center;
      padding:0px;
      margin:0px;
}

.nav ul li {
      display:inline-block;
      font-size:0px;
}

.nav ul li a {
      display:block;
      font-size:18px;
      padding:20px;
      font-weight:bold;
      color:#fff;
      font-family:'Open Sans', sans-serif;
      text-decoration:none;
      position:relative;
      transition:color .35s ease, background-color .35s ease;
      z-index:3;
}

.nav ul li a:before,
.nav ul li a:after {
      display:none;
      content:attr(data-glitch-text);
      position:absolute;
      top:20px;
      left:0;
      height:100%;
      width:100%;
      opacity:.8;
    }

.nav ul li a::before{
      color:#0ff;
      z-index:-1;
    }

.nav ul li a::after{
      color:#f0f;
      z-index:-2;
    }

.nav ul li a:hover::before,
.nav ul li a:active::before,
.nav ul li a:focus::before{
      display:block;
      animation:glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    }

.nav ul li a:hover::after,
.nav ul li a:active::after,
.nav ul li a:focus::after{
      display:block;
      animation:glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    }

@keyframes glitch{
      
0%  {-webkit-transform:translate(0);
      transform:translate(0);
    }

20%  {-webkit-transform:translate(-.15rem, .15rem);
      transform:translate(-.15rem, .15rem);
     }

40%  {-webkit-transform:translate(-.15rem, .15rem);
      transform:translate(-.15rem, .15rem);
     }

60%  {-webkit-transform:translate(.15rem, .15rem);
      transform:translate(.15rem, .15rem)
     }

80%  {-webkit-transform:translate(5px, -5px);
      transform:translate(5px, -5px)
     }

to  {-webkit-transform:translate(0);
      transform:translate(0)
     }
}

And now we can see our menu effects.

aimated-menuusing-css

I hope that you liked this simple animated menu effects. Thanks and keep visting 🙂

About the author

csshint

csshint is a web design and development blog that was originally created in 2016. we publishes articles and tutorials about the latest web trends, techniques. our team always dedicated to provide useful, inspiring and innovative content that is free of charge. you can follow us on:

Facebook and
twitter

2 Comments

  • Hi csshint,

    I saw you tweeting about wordpress and thought you might be interested in my new plugin WP Tag Machine and just for $2.

    With WP Tag Machine you can 100s of Top Google Rankings Without Building Any Backlinks…

    Keep making great stuff!

Leave a Comment