logo

Friday CSS Challenge

This week I had to realise a designer's vision of having slanted menu items in a standard navigation bar. A bit like this:

Untitled-1

The menu items can be of any width and they need to show the diamond when hovering over the unselected ones.

At first I though it was easy enough. Then I thought some more and decided it was "impossible". Then I thought even more and came up with a hack that worked.

How would you do it though? If you fancy the challenge you've got until Monday when I'll show how I did it with some basic CSS and a smidge of lateral thinking.

Comments

  1. Cool. Probably hard without css3 but here's one approach that's kinda clever.

    http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/

    The other way I thought of was with pseudo elements. Not sure if you played with those yet. I watched a nettuts or css podcast on itunes I believe talking about pseudo elements where you can insert content into your DOM object before or after the element.

  2. This guy always cranks out cool pure html/css solutions:

    http://www.cssplay.co.uk/menus/slanty.html

      • avatar
      • Jake Howlett
      • Mon 11 Jul 2011 05:48 AM

      Looks like a re-thinking of the trick used in the link in Jim's comment above.

      It's nice that it doesn't use an image, but, looking at the HTML it all looks a bit messy with all those empty B tags. Clever, but as a HTML purist I'd shy away from that approach.

    • avatar
    • Flaz
    • Mon 11 Jul 2011 02:38 AM

    I suppose you use a list, so each list element would become like this:

    <li><span class="left"><span class="right">Blogs</span></span></li>

    Set display:block to each span element, left has the left background (only the corner) and a padding-left of the same width of the background image. Idem for the right corner.

      • avatar
      • Jake Howlett
      • Mon 11 Jul 2011 05:46 AM

      In essence yes. The only trouble with that approach is that the menu items are then spread apart by twice the width of the image. This looks odd. See my post today for how I used negative margins to address this.

    • avatar
    • Rishi
    • Mon 11 Jul 2011 03:59 AM

    HTML list, background images and ofcourse CSS..

Your Comments

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


About This Page

Written by Jake Howlett on Fri 8 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