// Internet Duct Tape

Yes, it’s another post on CSS design with Sandbox. Feel free to skip.

One of the nice/painful things about designing for the Sandbox WordPress theme is that it forces you to use CSS to do the things you want to do. There’s no sneaking in there to tweak the underlying structure to get more convenient selectors, it’s CSS or nothing.

An often requested tip is how to do 3d buttons for the menu bar at the top of the page. It’s done using the common “sliding door” technique where one image is the front plus middle, and another image forms the end. I’ll be using the images and technique from the Dark Liquidcard 2.0 theme by Jori Avlis in this example, along with the Sandboxed example blog.

Image Is Everything

The starting point is to create two graphics for your 3d buttons. One image will have the left-and-middle portion and the other will have only the right portion. If you want the button to look different when it is highlighted (or when that page is selected), then put the highlighted version in the same image file right underneath it! That way the entire image is downloaded once and there isn’t a delay the first time a user hovers over the button.

In these images the button is 46 pixels high.

Getting Started

Here is what the menu looks like without any CSS:

We’ll start off by applying some basic styles: turn off the list style, remove any padding that might get in the way.

div#menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 46px;
}

Adding the 3d Buttons

Now we’ll add the 3d buttons as background images. We’ll start with the left-and-middle button first. It will attach to the list element (LI). You will have to adjust the padding so that the text is centered properly with respect to the image. Float left will change the orientation of the list. (Note: I changed the text color to white so that it would show up against the image)

div#menu ul li {
	float: left;
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/left.png)
		no-repeat left top;
	padding: 10px 0px 12px 10px;
}

Now add the right button. It will attach to the link anchor within the list element (LI A). Again, take care with the padding so that the text is centered properly.

 div#menu ul li a {
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/right.png)
		no-repeat top right;
	padding: 10px 25px 12px 10px;
}

Adding a Hover Effect

Now we want to show the hover effect. This is done by shifting the background image down 46 pixels. We’ll also disable the underline effect by turning off text-decoration.

div#menu li:hover {
  background-position: 0% -46px;
}

div#menu li a:hover {
	text-decoration: none;
}

div#menu li:hover a {
	background-position: 100% -46px;
}

Download the CSS File

You can download the code for this CSS example