mooVRotatingMenu, menu pour perdre ses clients
Mise-à-jour
17/04/2011 : correction d'un bug lié au rafraîchisement de la page.
03/04/2011 : une demi-tonne de trucs, ça m'a pris comme une envie d'arroser le jardin hier. Allons-y, dans le désordre :
- - Ajoût des callbacks sur l'entrée et la sortie du container principal, pas de raison que je ne fasse qu'avec cette daube de jQuery
- - Ajoût de la gestion de la taille de la typo, sommaire pour le moment mais bon c'est déjà ça
- - Possibilité de centrer un mot ou une ligne verticalement dans les pavés qui tournent, great isn't it ?
- - Cherry on the top of zi cake, ajoût d'une option permettant l'arrêt en douceur du menu quand on sort du container, mignon non ?
- - Last but not least, nouvelle option permettant de démarrer bouzin "ouvert" au lieu d'à plat et avec choix du radius
Le but du jeu :
toujours le même, perdre ses clients... Bon, sinon, bien sûr, ça peut toujours amuser la galerie ou encore animer les palles d'un moulin et, accessoirement servir de menu ou, pourquoi pas, de galerie photos façon carrousel...
A venir :
- - Une option permettant de lancer le menu à la souris au lieu de le faire à l'entrée dans le container (un petit air de mobile...).
- - Et, vous savez quoi, un de ces jours, des explications, une palanquée même, sur le comment on fait tout ça ! Stay tuned !
Mais d'abord, un poil de css (pour les deux exemples qui suivent)
#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; }
Exemple horizontal
et le javascript qui va bien
window.addEvent('domready', function(){
//menu horizontal
var myHorizontalToto = new mooVRotatingMenu($('HorizMenu'), $$('.mooRotate'), {
maxWidth : 230,
maxHeight : 140,
hPad : 1.5,
inertie : 20,
initRad : 100
});
});
Exemple vertical avec un poil de transparence
et son javascript itou
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
});
});
Télécharger mooVRotatingMenu.js
Have swing