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(http://i.imgur.com/f5MGB.png), 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..

    Thanks!

    # November 14, 2012 at 5:36 am

    I’m guess you might be able to play with this: http://css-tricks.com/better-tabs-with-round-out-borders/ 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

    http://codepen.io/anon/pen/vGxsI

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

    Its basically Nicolas Gallagher’s (http://jsfiddle.net/necolas/vqnk9/) 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.

*May or may not contain any actual "CSS" or "Tricks".