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..
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.
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.