Code a complex menu with html/CSS for mobile - html

Question

I have this menu image
I want to code it in plain HTML/CSS to be used for a game I'm creating for a phonegap application. I could just use this image inside the app, but the menu items text must be editable.
So I created an empty image to use as a background:
In Android there's lot of screen resolutions which forces me to use percentage instead of pixel, so first I restricted the game to be played only in portrait mode.
Sofar my approach is;
Use percentage values to position elements.
Use the image above (without the text) as a background and the items as spans.
Check a live demo here.
But this is not accurate; in some devices the text gets out of the area where it should :(
Here's the full game window:
Any hints?

Answer 1

You could achieve something pretty damn close to that JPG using nothing but CSS, it will be tricky though. Additionally, if the target audience is ONLY mobile users, then you don't have to worry about IE8 and below. Doing this in pure CSS would be impossible without CSS3 stuff that IE8 and below doesn't support.
So there is the CSS option... Then there could also be the SVG option. SVG's are vector graphics, meaning they scale infinitely without that nasty pixelating you see in raster graphics (like a jpg). SVG's can also be styled with CSS... Which means you could change the hover color, or the text color by modifying some CSS. The text then would just be overlayed on-top of the graphic. The vector graphic would allow you to scale the image up or down according to your orientation and screen size.
This is about as good as I could get with what I have to work with and limited time. Note that widths, heights, angles, etc can all be adjusted and your widths can be adjusted to be percentage based so they are more dynamic.
JSFiddle Demo
HTML:
<div class="container">
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
</div>
CSS:
.container {
width: 500px;
}
.button {
position: relative;
width: 300px;
height: 40px;
margin: 10px auto 0 auto;
background: #b9aea2;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
.button:first-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
left: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-left: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
background: #b9aea2;
}
.button:last-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
right: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-right: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
background: #b9aea2;
}
.button:after {
content: ' ';
position: absolute;
display: block;
width: 240px;
height: 10px;
bottom: -10px;
left: 30px;
-webkit-transform: skew(-80deg);
-moz-transform: skew(-80deg);
-o-transform: skew(-80deg);
background: #6b6562;
}
.button:last-child:after {
width: 0;
height: 0;
background: transparent;
}

Answer 2

A few things that might help:
In your CSS, looking at the .menu-game--container class, if you change background-size: center; to background-size: contain;, that makes sure that all of the image is indeed in the picture. Sometimes this doesn't happen.
If you really want to be sure that your text will be in the right place, consider putting the text directly into the image using photoshop or something, and then using a <map> tag for the links.
Finally, I have found that it works better if you use href="javascript:" rather than href="#" and then putting the javascript into the OnClick event or something.