Treehouse: Grow your CSS skills. Land your dream job.

Coding a curvy menu buttons

  • # November 14, 2012 at 5:21 am

    Hey guys, I’m having a little problem, our designer recklessly designed a little awkward menu(, now the client insists on coding it like this.

    So I’m trying to find the best way to do it, ideally the whole button should be click-able/hover-able(that’s the main problem, since the button actually ends in the first third of the next one) and gotta be flexible(not fixed width), how would you approach it? I want to use the least shizzle wizzle(areas, excessive use of images etc) as possible..


    # November 14, 2012 at 5:36 am

    I’m guess you might be able to play with this: but It might take some time and browser support (IE) would not be super-deep.

    # November 14, 2012 at 5:40 am

    You aren’t going avoid use of images on that, but as a punt, I’d probably do it this way,

    The li for the menu item is a solid block of colour easy, then I’d use :before and :after pseudo elements to tack on the curvy part of the button using images set to the background, this should give you scaleability on menu item’s then its just a matter of using z-index to stack them sequentially as to how to do that atm im at a loss, i keep thinking about css counter’s but… not sure that would work.

    # November 14, 2012 at 7:06 am

    It definitely is possible to do but I’d be freakin’ at the designer, who obviously knows little about front-end development, just because something looks good on paper doesn’t mean it can be done efficiently on the web.

    # November 14, 2012 at 8:11 am

    I don’t think there’s a safe and quick way to do it without javascript/flash or image maps..
    You’ll always end up clicking the wrong element when the pointer is in between two tabs

    # November 14, 2012 at 11:59 am

    CSS only solution mockup, probably as close as your going to get without resorting to image maps.

    Its basically Nicolas Gallagher’s ( border gradient code, tweaked for this senario.

    Any questions just ask.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.