Hello, je voudrais adapter ce (très chouette menu) :
http://www.agelessanime.com/testy/stretchymenu.html
Actuellement il est possible de spécifier une largeur minimale pour chaque élément du menu
Ici j'en ai 3, donc les largeurs respectives sont 100,200 et 160.
Mais j'aimerais également spécifier une largeur maximale pour chacun d'entre eux, savez vous comment je peux faire ?
merci !
Voici le code original :
[/i][/i][/i]
Modifié par gordie (18 Sep 2007 - 12:24)
http://www.agelessanime.com/testy/stretchymenu.html
Actuellement il est possible de spécifier une largeur minimale pour chaque élément du menu
window.addEvent('domready', function(){
new StretchyMenu('stretchyMenu', {maxItemWidth: 0.15, itemWidths: [100, 200, 160]});
});
Ici j'en ai 3, donc les largeurs respectives sont 100,200 et 160.
Mais j'aimerais également spécifier une largeur maximale pour chacun d'entre eux, savez vous comment je peux faire ?
merci !
Voici le code original :
var StretchyMenu = new Class({
options: {
width: 950,
itemWidths: [],
maxItemWidth: 0.5, // relative to menu width
dividerStyle: "3px solid #FFF",
fxOptions: {wait: false, duration: 300, transition: Fx.Transitions.quadOut}
},
initialize: function(element, options){
element = $(element);
this.setOptions(options);
var menuItems = element.getElements("li a");
if(menuItems.length < 2) return;
var itemMaxWidth = this.options.width*this.options.maxItemWidth;
var itemMinWidth = (this.options.width-itemMaxWidth)/(menuItems.length-1);
var itemDefaultWidth = this.options.width/menuItems.length;
var menuFx = new Fx.Elements(menuItems, this.options.fxOptions);
var fillFxList = (function(type){
var result = {};
if(type == 'default' && this.options.itemWidths.length == menuItems.length)
{
for(var i = 0; i < menuItems.length; ++i) result[i] = {'width': this.options.itemWidths[i]};
return result;
}
var iWidth = (type=='min')? itemMinWidth : itemDefaultWidth;
for(var i = 0; i < menuItems.length; ++i) result[i] = {'width': iWidth};
return result;
}).bind(this);
menuFx.set(fillFxList('default'));
menuItems.each(function(menuItem, index){
menuItem.set({
styles:{'border-right': (index != menuItems.length-1) ? this.options.dividerStyle : 'none'},
events:{'mouseenter': function(){
var fxList = fillFxList('min');
fxList[index] = {'width': itemMaxWidth};
menuFx.start(fxList);
}}});
}, this);
element.addEvent('mouseleave', function(){ menuFx.start(fillFxList('default')); });
}
});
StretchyMenu.implement(new Options);
window.addEvent('domready', function(){
new StretchyMenu('stretchyMenu', {maxItemWidth: 0.15, itemWidths: [100, 200, 160]});
});
[/i][/i][/i]
Modifié par gordie (18 Sep 2007 - 12:24)