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.

wp_nav_menu( array( 'container_class' => 'menu-header','theme_location' => 'primary','link_before' => '<div class="ribbon"></div>') ); 

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

margin-left: -20px;

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.

#access ul li.current_page_item .ribbon {
float:left;
background:url(../images/ribbon_triangle_02.png)  no-repeat;
position:relative;
top: 38px;
left: -11px;
width: 20px;
height: 20px;
}

And there you have it… our finished article

CSS WordPress Ribbon Menu
CSS WordPress Ribbon Menu
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 0px;
	width: 100%;
}
#access .menu-header ul,
div.menu ul {
	margin: 0;
}
#access a {
	color: #fff;
    background: #333;
    background-image: -moz-linear-gradient(-65deg, rgba(51, 51, 51, 1), rgba(51, 51, 51, 0.6)20%, rgba(0, 0, 0, 0.8) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(51, 51, 51, 1)), to(rgba(0, 0, 0, 0.8)), color-stop(20%, rgba(51, 51, 51, 0.6)));
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
    border-bottom: 1px solid #000;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #ccc;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)30%, rgba(0, 0, 0, 0.6) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.6)), color-stop(30%, rgba(0,0,0,0.4)));
	color: #000;
    border-bottom: 1px solid #000;
}
#access ul li.current_page_item .ribbon {
  float:left;
  background:url(../images/ribbon_triangle_02.png)  no-repeat;
  position:relative;
  top: 38px;
  left: -11px;
  width: 20px;
  height: 20px;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #444;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)50%, rgba(0, 0, 0, 0.3) );
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(rgba(0, 0, 0, 0.3)), color-stop(50%, rgba(0,0,0,0.2)));
    border-bottom: 1px solid #000;
    margin-left: -20px;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #444;
    border-bottom: 1px solid #000;
    background: #15c692;
    background-image: -moz-linear-gradient(-65deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)30%, rgba(19, 185, 136, 1) );
}

Android – Getting apps to appear on the market

When I first started working on Asssist for Gingerbread Design we all knew that we wanted the app to be available across as many devices as possible. We wanted to cover devices with smaller screens and lower densities such as the HTC Wildfire as well as more advanced devices. Little did I know that being able to do this would take so much searching and trial and error.

And even after trying the app out the on the Android emulator with it’s settings to match the Wildfire (which seemed to work OK) when we came to launch the device in the Google Market it seemed that the device wasn’t being displayed to all users.

We were told our app didn't appear on the market
We were told our app didn't appear on the market

Then, after weeks of searching I came across a little gem of info (sorry can’t remember where)… all you have to do is include the following in your project’s AndroidManifest.xml file.


This seemed to work for me and I hope it does for you too.