I’ve had a few people ask how to replicate the animated navigation bar effect used on one of my example sites. I’m not sure how best to describe it – the tabs kind of slide up as you hover over them. It’s easier to just see it in action:
This example uses a Genesis framework site (if I haven’t changed it since, you can see it here), but the solution is theme agnostic and you should be able to get it working on most WordPress themes.
The way it works is by using a CSS background ‘gradient’ which is actually 2 horizontal blocks of solid colour. You can easily generate the gradients using a website like the Colorzilla gradient generator one.
When the mouse hovers over the navigation list item, the background is animated to slide up. So it starts off with the top colour stripe (which is the same as the background colour of the navigation) and then the coloured ‘highlight’ stripe scrolls up into view.
Here’s an example of a CSS gradient (this isn’t an image – it’s a simple CSS3 gradient)
If we make the background gradient more than twice the height of our actual navigation div, then by default the starting position for the background would be in the top left – so you’d just see the red background. When you hover over, the background position is moved upwards so you just see the blue background.
Bonus points
CSS backgrounds and gradients support opacity values – so you can set some of them to be transparent. Rather than using two blocks of solid colour as above, it’s a better idea to make one of the ‘stripes’ a fully transparent one. So you could make the top half transparent and the bottom half your ‘highlight’ colour. That future-proofs it a bit if you decide to tweak your navbar colour a bit.
Taking it further
You’ll see from the example video that each of the tabs in my example has a different highlight colour. Yet they all share the same background gradient. There’s two ways you can set a different colour for each nav item. You could give each menu item a class in the WordPress menu editor (like .color1, .color2 etc) or you could use pseudo-classes like
nav li:nth-child(1){ background-color:red}
nav li:nth-child(2){ background-color:blue}
nav li:nth-child(3){ background-color:yellow}
nav li:nth-child(4){ background-color:green}
The knack for the animated effect here is to set the <li> item to have the background colour and to apply the background-gradient to the <li> <a> item.
So in my case I have set the top half of the background stripe to be the same colour as the navbar (i.e. white) and then the bottom half is transparent – so when it slides up it reveals the background colour of the <li> item.
The CSS
You’ll need to edit this a bit to suit your theme, but hopefully this is enough to get you on the right path.
Since this is making use of some CSS3 properties, it may not work properly in older versions of Internet Explorer. Users wouldn’t see the animation effect, but since it is just decorative anyway I don’t think that’s such a big deal.
Let me know below if any of that doesn’t make any sense…
