CODEWITHSUNDEEP
jquerycsshtml5-canvas
Lina
Lina

Reputation: 451

implement an elliptic Menu in HTML5 CSS3

I would like to implement this type of menu using CSS3 transforms animations similar this. enter image description here

First question would be: is this feasible?

Second question: Where to do it? the simple CSS3 examplesfrom the net show how to translate, shear, scale and rotate simple objects. But I have no idea where to start looking for info on how to implement a menu like it. thanks

Upvotes: 0

Views: 305

Answers (1)

markE
markE

Reputation: 105035

You can map areas on your menu-image to be used as links:

Example code and a Demo:

Please run this demo in Full-Page mode

body{ background-color: ivory; }
input[type='text']:focus{background:red;}
input[type='text']:blur{background:white;}
<img src="https://dl.dropboxusercontent.com/u/139992952/multple/menu.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="69,33,117,88" href="#m1">
<area shape="rect" coords="192,4,241,60" href="#m2">
<area shape="rect" coords="329,25,389,83" href="#m3">
<area shape="rect" coords="364,138,422,197" href="#m4">
<area shape="rect" coords="232,188,287,243" href="#m5">
<area shape="rect" coords="81,181,148,238" href="#m6">
</map>
<br>menu item 1:<input type=text id=m1>
<br>menu item 2:<input type=text id=m2>
<br>menu item 3:<input type=text id=m3>
<br>menu item 4:<input type=text id=m4>
<br>menu item 5:<input type=text id=m5>
<br>menu item 6:<input type=text id=m6>

Upvotes: 1

Related Questions