6

Is it possible to make curve/arc style menu with css3?

enter image description here

Can I achieve this use canvas or something in HTML5?

Thanks in advance, Logan

Logan
  • 1,682
  • 4
  • 21
  • 35
  • Have a look at this thread http://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas – Romain Pellerin Mar 21 '13 at 12:57
  • Yes, you can do a curved menu like that - check my answer to this question: http://stackoverflow.com/questions/13132864/circular-tooltip/ – Ana Mar 21 '13 at 13:43
  • 1
    @Ana that is positively awesome! – xec Mar 21 '13 at 13:54

1 Answers1

4

I don't know of any elegant solution unfortunately, particularly when it comes to the menu items, but the arc itself should be doable in plain css and a couple of html elements.

Maybe this can get you started.

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/

The challenge now would be to position all the menu items and rotate them accordingly... I don't really see this as a feasible solution, but I'm posting anyway in hope that you might find it useful.

SVG allows you to curve text and is probably a tool better suited for this task.

EDIT

Here is a version i did with SVG, which is a proof-of-concept and needs tweaking to look good (renders horrible in chrome and tiny in IE for some reason), 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>

SVG demo at: http://jsfiddle.net/rNLsr/2/

Community
  • 1
  • 1
xec
  • 17,349
  • 3
  • 46
  • 54