menu wheel

by eatenbymonsters

HTML

<div class="outer">
    <div class="rotate right">Click here to rotate right</div>
    <div class="rotate left">Click here to rotate left</div>
    <div class="inner">
        <div class="item one">Item One</div>
        <div class="item two">Item Two</div>
        <figure>Hello, world!</figure>
    </div>
</div>

CSS

.outer{
    overflow:hidden;
    position:relative;
    width:600px;
    height:100px;
}
.rotate{
    position:absolute;
    display:block;
    background:rgba(100,100,100,.5);
    top:0;
    width:100px;
    height:100px;
    z-index:500;
    cursor:pointer;
}
.right{
    right:0;
}
.left{
    left:0;
}
.right:hover .inner{
    {rotate-right code goes here}
}
.left:hover .inner{
    {rotate-left code goes here}
}
.inner{
    position:relative;
    top:-500px;
    width:600px;
    height:600px;
    transition:0.5s;
    z-index:0;
}
.item{
    display:block;
    background:#777;
    width:100px;
    text-align:center;
    //padding:.5em 0;
    z-index:50;
}
.one{
    position:absolute;
    bottom:0;
    left:250px
}
.two{
    position:absolute;
    right:-40px;
    top:280px;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg);
}
figure {
    position:absolute;
    top:0;
    display:block;
    margin:0;
    border-radius:50%;
    background:#f00;
    width:600px;
    height:600px;
    line-height:600px;
    text-align:center;
    transition:0.5s;
}

//.inner:hover {
//    -webkit-transform:rotate(-90deg);
//    -moz-transform:rotate(-90deg);
//    transform:rotate(-90deg);
//}

.inner.rotated, .inner.rotated:hover {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    transform:rotate(90deg);
}

JavaScript

$('body').on('click', '.right', function() {
    $('.inner').addClass('rotated');
});
$('body').on('click', '.left', function() {
    $('.inner').removeClass('rotated');
});