mooVRotatingMenu, menu that freaks customers out...
Updates
04/17/2011 : correction of a bug when reloading the page
04/03/2011 : half a ton..., sort of a peeing sudden urge. Let's have a look at all this, as it comes:
- - Added callbacks when entering and leaving the container, no reason i would only do that with that crap jQuery
- - Added sort of a font-size management, a bit minimalist so far but well...
- - Added too the ability to center vertically a word or a single line inside the elements, great isn't it?
- - Cherry on the top of the cake, added an option that makes the menu stop gently when you leave the container, nice isn't it?
- - Last but not least, added an option allowing to start with an "open" menu (you can set the "radius")
What for:
as it has always been, freaking your customers out...
Now, of course you could use it just to show off, animate a windmill, a photo gallery or, why not... a menu
To do:
- - An option to launch the menu with a drag and "throw" instead of by hovering the container, a little mobile like
- - And, you know what, explanations, lots of... telling you how to do that, stay tuned !
Let's go, some css (for both examples below)
#HorizMenu {
margin : 8px auto 20px auto;
position : relative;
width : 600px;
height : 300px;
background: transparent;
border : 1px solid #ededed;
}
#VerticMenu {
margin : 8px auto 20px auto;
position : relative;
width : 400px;
height : 500px;
background: transparent;
border : 1px solid #ededed;
}
#VerticMenu a,
#HorizMenu a {
text-decoration : none;
color : white;
text-align : center;
border : 1px solid white;
overflow : hidden;
}
.mooRotate {
text-align : center;
line-height: 100%;
}
.rotateHome { background: #ff0000; }
.rotateAbout { background: orange; }
.rotateFriends { background: green; }
.rotateResort { background: purple; }
.rotateGoodies { background: #800; }
.rotateMoo { background: purple; }
.rotateWork { background: black; }
Horizontal example
the js that goes with
window.addEvent('domready', function(){
//menu horizontal
var myHorizontalToto = new mooVRotatingMenu($('HorizMenu'), $$('.mooRotate'), {
maxWidth : 230,
maxHeight : 140,
hPad : 1.5,
inertie : 20,
initRad : 100
});
});
Vertical example with a cloud of transparency
and its js too...
window.addEvent('domready', function(){
//menu vertical
var myVerticalToto = new mooVRotatingMenu($('VerticMenu'), $$('.mooRotateV'), {
maxWidth : 250,
maxHeight : 150,
mode : 'vertical',
hPad : 2.8,
vPad : 1.5,
opacity : 0.8,
inertie : 20
});
});
Have swing