how to make an odd shaped html/css menu?


Tags: html,css,css-shapes

Problem :

What approach to use to make an odd shaped menu on a website, like attached? Each piece of the circle should be a separate link. Hovering the mouse should be rather precise, especially near the middle. (The absolute 20px middle could be no link at all, if not posible to be 100% precise)

enter image description here

I've seen irregular menus made using overlapping rectangles, like here: http://www.vanityclaire.com/ Shapes are overlapping, but menu is made from rectangles, a little cheating takes place. However, in my case, the amount of overlapping is too much to use any such technique. Is there any chance to do it in browser/device compatible way, other than just use flash?



Solution :

Actually, you can do it using CSS3 - see my demo: http://dabblet.com/gist/3116939 //

EDIT: version that also works in IE9 http://dabblet.com/gist/3117278

The idea is to have a div .pie with "slices"

<ul class="pie">
    <li class="slice" id="s1">
        <a class="slice-contents" href="#slice1"></a>
    </li>
    <li class="slice" id="s2">
        <a class="slice-contents" href="#slice2"></a>
    </li>
<!-- and so on -->
</div>

You make the pie to be a disc using border-radius: 50%;

You skew and rotate each slice. You bring back the contents of the slices to a non-skewed rectangular shape (which can also prove useful if you want to have text on the slices) and then you set the background.


    CSS Howto..

    Table borders not showing correctly

    css - how to determine why a particular css rule is being overwritten

    hide/show multiple div elements using jquery

    How do I achieve a hover over image effect?

    Cannot get Font Awesome Images to Show

    How do you load the css for a Mediawiki tag extension?

    how to set a fixed width to textbox which wont be affected by varying value of padding-left?

    how do i place a text upperright side of the image?

    How do a Add scroll bar with fixed header

    how to remove css from the text box?

    Issue with Hide / Show Jquery on fixed positioned div

    How to center a navigation bar with CSS or HTML?

    How to change url of image which is generated dynamically just by using CSS and media queries?

    Greasemonkey: How to do something when style=“display: none;” changes?

    How to generate width CSS from JavaScript / C#

    Showing Div via CSS selector within a UL

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How to make smooth animation in css?

    How to keep styles after animation?

    How to use CSS filters in JavaScript?

    How to override HTML image using CSS

    How do you select a security authentication modal with a css selector?

    How to style nested element that is styled by its parent already

    How to set alternate row color for a given attached diagram

    How to replace cycle('float: left', 'float: right') to use pure css?

    How can I get this style effectv with css or jquery?

    How to show a div behind navigation on rollover

    How to override group of css class?

    How to make an image inside a diamond shape morph to circle

    style sheet -moz-linear-gradient no show in web mobile browser?