PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Mootools menu hapert

Door Jorn Engelbart op 09-12-2008 16:24
1.502 views
Hallo,

Ik ben bezig met mijn nieuwe site en hier heb ik met mootools een effect gemaakt dat als je met je muis over het menu gaat dat er een balkje mee beweegt. Maar als je met je muis naar een ander menuitem gaat dan hapert die omdat ik heb ingesteld dat bij mouseout dat hij terug gaat naar zijn oorspronkelijke plek. Alleen hoe kan ik nou voorkomen dat die niet terug gaat als ik naar een andere menuitem ga maar dat die wel terug gaat als ik niet naar een ander menu item ga?

Hier het voorbeeld: (dat blijft altijd duidelijker dan de uitleg)
http://www.jornswebsites.nl/new/

Dit is de code die voor elke menuitem wordt gebruikt:

var startMargin = '182px';
	var startWidth = '277px';
	
	$('button_about').addEvent('mouseover',function(){
		var aboutFx = new Fx.Tween($('selector_header'));
		//Immediately sets the background color of the element to red:
		aboutFx.start('margin-left', '-458px');
		
		var aboutFx1 = new Fx.Tween($('selector_header'));
		aboutFx1.start('width', '56px');
	});
	$('button_about').addEvent('mouseout',function(){
		var aboutFx = new Fx.Tween($('selector_header'));
		//Immediately sets the background color of the element to red:
		aboutFx.start('margin-left', startMargin);
		
		var aboutFx1 = new Fx.Tween($('selector_header'));
		aboutFx1.start('width', startWidth);
	});


BVD
Jorn


T
Tommasso
09-12-2008 16:34
misschien met een div om de hele knoppen heen?

en als hij dan onmouseout cheken met een functie of hij ook die div verlaat?

(is maar een idee hoor :), geen garantie op werken )
J
Jorn Engelbart
09-12-2008 17:55
Het is al gelukt voor de mensen die zoeken zo:


$('button_about').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			$('selector_header').set('tween', {duration: 500,}).morph({'width' : '56px', 'margin-left': '-458px'});
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			$('selector_header').set('tween', {duration: 500,}).morph({'width' : startWidth, 'margin-left': startMargin});
		}
	});

Reageren

Inloggen om te reageren