Hi, my name is Al

Feigning Curved Navs Using CSS

First off, heres a little thinking music, the latest sample from Axe In The Head entitled - Bray. Now, on with the CSS.

The first time I made a curved css nav I was pretty confused(having assumed it was going to be done in flash). Not really knowing how to go about doing it, I checked out alistapart and came across ye olde sprite tute by Dave Shea. This was pretty much exactly what I was after. The basic idea is you set your background/image up as if you were going to use the sliding door CSS type nav:


#nav {
width:128px;
background:url(../art/nav.gif) top left no-repeat;
height:162px;
}

#nav ul, #nav li {
margin:0;
padding:0;
list-style:none;
}

#nav li a {
position:relative;
display:block;
height:16px;
}

#nav li a span {
margin-left:-999em;
}


Add in values according to size of the menu graphic. Inside the a span tag you have your list item name, and it gets pushed out the side. You ‘can’ use display:none, but this way is better for screen readers and bad accessibility makes me angry, and you wouldn’t want to see me angry. Also, if you are using this method, Firefox will have an on click state that makes a dotted border that goes around the spanned item. To get rid of this I put:

a, a:hover {
outline:none;
}

I just apply it to everything, as it wont hurt anyone. So basically the start is there for you. The ‘curve’ parts come in the id tags of list items.

#nav li#home a {
width:52px;
top:5px;
left:27px;
}

#nav li#home a:hover {
background:url(/art/nav.gif) -155px -21px no-repeat;
}

The anchor tag will be displayed as a relative block element and can be positioned around wherever you want using CSS positioning. They can change as you need to and I have used this technique for making curved navs. The idea is you can just adjust the top and left as you see fit, giving it a bend vertically or horizontally. Now, in most menus it has a background, but in this menu, its literally a blank box, height and width of the list item. On the hover state, you drag the original nav image behind the blank window. Of course, since we have styled the anchor tag, you wont need to fix this for IE6.

The flaws with this method are that its a “feigned” curved nav, not a curved nav, meaning, this was the best thing I could come up with. The actual anchor area is still a rectangle so there is always going to be white space thats part of the anchor, how much depends on the angle of the curves. I also haven’t needed to allow for dropdown menus with this kind of menu. Mostly because the nav design wouldn’t allow for one, but I may give it a go just to see.