active link

[SyntaxMind]

I am working on a site and I have this navigation that when hovered will raise its height, but once I mouse out the height does not stay. Does anyone have any tips on how I could work this into what I have so far?

 

package 
{

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

import com.greensock.TweenMax;
import com.greensock.TimelineMax;
import com.greensock.easing.Back;

public class Main extends MovieClip
{
	public var tl:TimelineMax;

	// stage instances
	public var logo:MovieClip;
	public var aboutBtn:MovieClip;
	public var portfolioBtn:MovieClip;
	public var contactBtn:MovieClip;

	private var targetSection:String;
	private var currentSection:String = "portfolio";



	public function Main()
	{
		if (stage)
		{
			init();
			trace( "stage" )
		} else
		{
			trace( "listener added" );
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
	}

	private function init()
	{
		removeEventListener(Event.ADDED_TO_STAGE, init);
		navigation();
		timeline();
	}

	private function timeline():void
	{
		tl = new TimelineMax( {} );

		contactTxt.alpha = aboutTxt.alpha = 0;
		box.alpha = 0;

		aboutBtn.buttonMode = true;
		portfolioBtn.buttonMode = true;
		contactBtn.buttonMode = true;

		// portfolio section
		tl.addLabel("portfolio", tl.duration);
		tl.append( TweenMax.to(box, 1, {autoAlpha:1, onComplete:tl.pause}) );
		tl.append( TweenMax.to(box, .5, {autoAlpha:0}) );

		// about section
		tl.addLabel("about", tl.duration);
		tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1, onComplete:tl.pause}) );
		tl.append( TweenMax.to(aboutTxt, .5, {autoAlpha:0}) );

		// contact section
		tl.addLabel("contact", tl.duration);
		tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1, onComplete:tl.pause}) );
		tl.append( TweenMax.to(contactTxt, .5, {autoAlpha:0}) );
	}

	private function onOverHandler(e:MouseEvent):void
	{
		TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut});
	}

	private function onOutHandler(e:MouseEvent):void
	{
		TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut});
	}

	private function onClickHandler(e:MouseEvent):void
	{
		// button IDs
		aboutBtn.ID = aboutBtn.bar.ID = "about";
		portfolioBtn.ID = portfolioBtn.bar.ID = "portfolio";
		contactBtn.ID = contactBtn.bar.ID = "contact";

		targetSection = e.target.ID;

		if (targetSection != currentSection)
		{
			tl.gotoAndPlay( e.target.ID );
			currentSection = targetSection;
		}
	}

	private function navigation():void
	{
		aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
		portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
		contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
	}
}

}

[X10]

Hi SyntaxMind,

 

Maybe I'm not understanding you correctly but you have 2 functions, one when you mouse over, the other when you mouse out:

 

      private function onOverHandler(e:MouseEvent):void
     {
        TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut});
     }

     private function onOutHandler(e:MouseEvent):void
     {
        TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut});
     }

 

If you want the menu item that you are hovering over to not go down again when you hover away from it you simply have to remove "MouseEvent.ROLL_OUT, onOutHandler" for all your menu items.

 

Is this what you're asking?

Presumeably however, if you then were to mouse over any other button, you would want the previously 'raised' button to go down?

This would involve a bit more code to do correctly.

 

Have I understood you correctly?

 

X10

[SyntaxMind]

No sorry I didn't explain that properly. I'm looking for the sticky nav effect Carl used in snorkle.tv. I tried to incorporate his currentNav and navItem variables but for some reason Im getting undefined and null traces. He doesn't use the ID property like I am using here so I'm wondering if anyone can see how I would stick what I have.