0

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

Lina
  • 451
  • 1
  • 8
  • 23

1 Answers1

1

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>
markE
  • 102,905
  • 11
  • 164
  • 176
  • thanks markE but did you have any idea how can I create directly an elliptic menu like shown in the image without a formular – Lina Feb 04 '15 at 13:16
  • 1
    I must not be understanding your question. You've shown an image and I assumed you wanted the subimages to be hyperlinks--Yes? If not, please more clearly explain what you desire. :-/ – markE Feb 04 '15 at 16:42
  • ,I mean, how can I implement this elliptic menu with CSS and images,I am newer to the web world,I suived this demo:http://stackoverflow.com/questions/27945986/css3-circle-with-clickable-items-jqueryradial-menu but I didn't get the form shown above :( – Lina Feb 04 '15 at 17:17
  • 1
    These menus are typically done like this: (1) create the complete image in your favorite image editor--Photoshop, Gimp, etc. (2) Put the image on your website. (3) Create clickable hotspots on the image using the `map` and `area` tags. Please explain in more detail if you desire something different :-/ – markE Feb 04 '15 at 17:27
  • yes markE thanks I will use the map tag thnks a lot :D – Lina Feb 04 '15 at 18:01