logo

Slanted Menu Items

On Friday I set a "challenge" to come up with the following navigation bar using CSS.

I think I might have over-sold what I'm about to describe as being some amazingly-clever trick using the latest in CSS3 techniques. That it ain't. All I've done is use some lateral thinking.

You can see a working example of the menu here.

In the example notice how the items "blend" in to each other when you hover over the menu items next to the already selected item. This was the challenge and where the trickery came in.

Basically it uses negative margins (e.g: margin-left: -16px) to make the neighbouring menu items overlap each other by half the width of the slanted area. Because the grey area of the images used to make the slant is in fact transparent you can still see one through the other.

Not rocket science but (I thought) a nice example of how you can normally achieve whatever you need to with CSS by using some lateral thinking and a trick or two.

Comments

  1. It's cool to be sure, but not as intuitive (to me) as the tabs. Maybe I'm stuck in the 00's with an outdated sense of things.

    I can see it being used as a progression indicator though to swap out the slants for >> chevron style decorations... something to say "next step" visually.

    Clever, though, with potential for a better UI when used creatively.

      • avatar
      • Jake Howlett
      • Mon 11 Jul 2011 09:40 AM

      I should have said - I only did this as I was asked to. I wasn't asked for my opinions on it, which is probably a good thing.

      As with anything on the web, never ever go against convention.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 11 Jul 2011

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content