Simple, Fast, & Practical Animation for the Modern Web: Nav Menu

November 20, 2015

While working on the new website for PJ Green I wanted to do something special with their navigation menu. I was inspired by a snippet of CSS I came across in a tutorial for a simple but effective animated background effect.

With some simple CSS changes I was able to create a subtle expanding/growing effect in the top navigation and a more obvious left-to-right highlighting effect within the dropdown menus, with an individually colored secondary nav menu to match their Services color codes.

You can see the navigation menu in action here: http://www.pjgreen.com/

Dropdown Transition Effect CSS:

header nav ul li ul li a {
   -webkit-transition: all ease 0.5s;
   -moz-transition: all ease 0.5s;
   transition: all ease 0.5s;
   background-position: 100% 0;
   background-size: 200% 100%;}
header nav ul li ul li a:hover{
   background-position: 0 0;}
header nav ul li ul li { border-left:5px solid #00937f; }
header nav ul li ul li a {
   background-image: linear-gradient(to right, #00937f, #00937f 50%, transparent 50%, transparent); }

Here are some other examples of navigation enhancements for the web:

How do you like to implement practical animated effects into your web development projects? I’d love to hear from you!

Keep on creating!
-Rob