Introduction

As Divi web designers, we’re typically only allowed a certain degree of creativity when it comes to our designs, since we have to put a professional and clean image first. Sometimes though, we get to do something special. Recently, we created the web site for Leftie Plays, a video game streamer on Twitch and YouTube. Given the gaming nature of the site, we wanted to create something unique that felt like a video game. Here’s how we did it.

Click here for a live demo

 

Step 1 – The Background

The first step was to create a background image for our header that fit the look and feel of our site. I won’t be providing that here, since it will be different for you. I used Photoshop to make a sort of nebula/starfield effect, then used Triangulator to generate some vector shapes based on that image. I then edited the file generated by Triangulator in Adobe Illustrator to move things around a bit, and remove the bits I didn’t need, then imported the new image back into the original Photoshop project and played with blending modes until I found something that looked good. You can really do whatever you want for this part. Then, I used CSS to apply the background image to the header like so:

#main-header {
background:url('/wp-content/uploads/path/to/your/image.jpg');
background-size: initial;
background-position: center top;
background-repeat: no-repeat;
}

 

Step 2 – The Menu Styling

With the background image taken care of, now it’s time to add the CSS to style our menu. Feel free to play with the values until you achieve the desired look.

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 40%;
background: #ffffff; /*** COLOR OF THE LINE ***/
opacity: 0.3;
height: 20px; /*** THICKNESS OF THE LINE ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 1);
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

 

Step 3 – Animating The Menu

Now we need to add CSS to animate the menu on hover. You can find other CSS animations to use, but for the purposes of this guide, we went for a flashing/pulsing loop.

.flashit:hover {
-webkit-animation: flash linear 0.3s infinite;
animation: flash linear 0.3s infinite;
}
@-webkit-keyframes flash {
0% { opacity: 1; }
50% { opacity: .1; }
100% { opacity: 1; }
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: .1; }
100% { opacity: 1; }
}

 

Step 4 – Applying Styles To Menu Items

We need to apply a class of “flashit” to the menu items we want to have the effect. Head to Appearance > Menus, and make sure that CSS Classes are enabled in screen options (accessible via the top right corner of the page). Apply a class of “flashit” to each menu item that you want to have the effect on.

That’s it! Wasn’t that easy?

 

Conclusion

Did you use this guide to make something awesome? Have any alternative designs/animation to share? Sound off in the comments!

Pin It on Pinterest