WordPress Ribbon Menu with CSS

For a recent project I was asked to replace a Flash site with a CSS/HTML version which was to match the existing look as closely as possible. This was essentially straight forward apart from the menu that was needed. The menu had a ‘wrapped ribbon’ affect on the currently visited item.

Flash Ribbon menu
Flash Ribbon menu

What I’m going to do here is run you through how I replicated this in CSS/HTML on a WordPress powered site. The finshed menu should look like the following;

CSS WordPress Ribbon Menu
CSS WordPress Ribbon Menu

The approach I took was to use the built in wp_nav_menu hook in WordPress to display the menu (which gives a lot of control) but to pass in an extra parameter to the call to define an extra div with a class defined which would be output before the link text.

With some fairly standard CSS (all source can be found below) I now had a menu which looked like the following;

CSS Ribbon Menu Work in progress

The trick now was create the actual wrapped ribbon affect… and to do this I gave the selected item negative left margin

CSS Ribbon menu work in progress

The next step was to creat an image to make it look like the ribbon wrapped back around the menu. This is simply a triangle image with a radial gradient along it’s angled edge to give a feel of depth. For my menu the image I used was this one.

I then assigned this image as a background to the div element we added earlier in our wp_nav_menu call for the selected menu item.

And there you have it… our finished article

CSS WordPress Ribbon Menu
CSS WordPress Ribbon Menu

Leave a Reply

Your email address will not be published. Required fields are marked *