Geek Answers Handbook

How to make curve style menu in css3?

Is it possible to create a curve / arc style menu using css3?

enter image description here

Can this canvas be used or something in HTML5?

Thanks in advance, Logan

+6
source share
1 answer

I don’t know of any elegant solution, unfortunately, especially when it comes to menu items, but the arc itself should be executed in simple css and several html elements.

Perhaps this will help you.

HTML

<div class="container"> <div class="gray"></div> <div class="white"></div> </div>

CSS

 .container { height: 200px; overflow: hidden; position: relative; } .gray, .white { position: absolute; left: -25%; right: -25%; border-radius: 100%; } .gray { /* use a gray border with border radius to emulate an arc */ top: -50%; border:100px solid gray; border-top: none; height: 200px; } .white { /* put a white oval on top for the top edge of the banner */ top: -80%; background-color: white; height: 300px; }

http://jsfiddle.net/rNLsr/

Now the challenge is to put all the menu items and rotate them accordingly ... I really do not think this is an acceptable solution, but I still hope that you find it useful.

SVG allows a text curve and is probably the tool best suited for this task.

EDIT

Here is the version I made with SVG that is proof of concept and needs to be set up to look good (for some reason, it seems terrible in addition to and tiny in IE), but it gives you the basic idea:

Svg

 <svg viewBox="0 0 500 300" version="1.1"> <defs> <!-- Start at (10,40) end at (490,40) use control point (250 ,85) --> <path id="curvetext" d="M 10,40 Q 250,85 490,40" /> </defs> <use x="0" y="0" xlink:href="#curvetext" fill="none" stroke="gray" stroke-width="50"/> <text font-size="12" fill="white"> <textPath xlink:href="#curvetext"> <a xlink:href="http://example.com">Menu 1</a> Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Menu 9 </textPath> </text> </svg>

Demo version of SVG at: http://jsfiddle.net/rNLsr/2/

+4
source

More articles:


All Articles