rotating wheel as menu

Question

Is there an easy way for making a spinning wheel as menu with only php, html and css? The idea was a half circle on the bottom of the page, and when you click on the left side the wheel turns -90deg and when you click on the right side, the wheel turns 90deg. Is this possible without jQuery?

Answer 1

You could build the full wheel inside two divs - an inner container and an outer container. Setting the outer container to overflow:hidden; would crop out all but the section you want visible. Then you could rotate the wheel by applying a CSS3 rotate to the inner container (James' answer shows this technique nicely).

I'm not sure how you could trigger the rotation using a click event without having to resort to jQuery, but you could place an invisible div to the left and right sides of the outer container using position:absolute; (don't forget to apply position:relative; to the outer container div), and trigger the rotation from their hover states.

HTML would look something like this:

<div class="outer">
    <div class="rotate right"></div>
    <div class="rotate left"></div>
    <div class="inner">
        {Your menu here}
    </div>
</div>

And the css would be:

.outer{
    overflow:hidden;
    position:relative;
    width:600px;
    height:100px;
}
.rotate{
    position:absolute;
    top:0;
    width:100px;
    height:100px;
}
.right{
    right:0;
}
.left{
    left:0;
}
.right:hover .inner{
    {rotate-right code goes here}
}
.left:hover .inner{
    {rotate-left code goes here}
}

I agree with James that you'd probably need to use some jQuery to make the rotations stick: probably just an addClass or something simple like that should do the trick.

The big question, however, is do you want to be hiding parts of your menu at all? If it's the main navigation for your site, you should really have it all on display rather than hiding parts of it.

Edit:

Played with James Donnelly's excellent fiddle to show the wheel in action (bit of a hatchet job on my part, but we're getting there...). Only two menu items, and they're just divs for now – ought to be lis really. I used James' jQuery, but changed toggleClass to addClass and added a removeClass (each triggered by clicking on the relevant left/right div to get the left/right button functionality.

the new fiddle

Turns out the :hovers only complicate things. This does use a little jQuery, so it doesn't answer the question entirely, but I honestly can't see a way to make the rotations stay in place without it. Anyone know better?

My positioning of the menu items is a bit of a mess, though, so if anyone has a cleaner way to write this then please dive in!

Answer 2

It is possible to an extent but it's a bit advanced. Check out https://developer.mozilla.org/en-US/docs/Web/CSS/transform for an overview of 2D transformations in CSS.

You would probably need JavaScript to apply different classes to your element to retain the rotation, but that depends on how you're wanting your menu to function.

Here's an example I've whipped up which rotates a figure 90 degrees anticlockwise when you hover over it, and 90 degrees clockwise (aided by jQuery) when you click it.

This simply applies a CSS transform property to the element (note that this requires vendor prefixing):

figure:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

You may also benefit from looking at Ana's fabulous answer to this question: Creating a Radial Menu in CSS