11548 sujets

JavaScript, DOM et API Web HTML5

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
	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)