[Pro] moving navigation bar - howto?

Freeway
1

Hi,

This is my first post here.
I am wondering if it is possible to create a special kind of “floating navigation menu”. There are two websites as examples:

  • here http://www.werkstette.dk/ in the beginning the navigation menu is exactly at the center of the page, once you click on one of the menu items on it, it moves down to the bottom - and stays there for the rest of the navigation.

  • here http://www.diehlgroup.com/ in the beginning the menu is in the bottom and, once you click on it, it moves to the upper border of the page, and stays there for the rest of the navigation.

My question: how do you get a navigation menu to first be in one position, and move only after a trigger event (like the first click)?

Any help is GREATLY appreciated,

thanks,

Dirk

http://www.werkstette.dk/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Welcome! Here’s one way to do this. You’ll need the Protaculous Action (Freeway 5.6 and lower) or the Protaculous 2 Action (versions 4 - 6). Both are available at http://actionsforge.com

In Protaculous, click on the box containing your links, and apply the Observer Action to that element. Set the Library picker to Scriptaculous-packed, enter ‘click’ in the Event field, and click on the Function Body button right of that event. Paste in the following:

if($(this).positionedOffset()['top'] > 12) $(this).morph('top:12px');

That’s going to move the element to the top of the screen (to 12px from the top) so adjust the offset if you want it a different position.

In Protaculous 2, there’s no Observer Action, so you’ll apply the Action to the page itself, note the ID of the box you want to move (click once on the box and write down what you see in the Name/ID field [6] or Title field [< 6]).

Click on Add Scriptaculous Libraries to add the Effects library, then click on Dom Loaded Observer. Paste in this very similar line, changing item42 to be the exact (case-sensitive) ID that you wrote down earlier.

$('item42').observe('click', function(evt){ if(this.positionedOffset()['top'] > 12) this.morph('top:12px'; )});

Hope this helps, and welcome to Freeway!

Walter

On Feb 5, 2013, at 4:11 PM, Dirk van den Berg wrote:

Hi,

This is my first post here.
I am wondering if it is possible to create a special kind of “floating navigation menu”. There are two websites as examples:

  • here http://www.werkstette.dk/ in the beginning the navigation menu is exactly at the center of the page, once you click on one of the menu items on it, it moves down to the bottom - and stays there for the rest of the navigation.

  • here http://www.diehlgroup.com/ in the beginning the menu is in the bottom and, once you click on it, it moves to the upper border of the page, and stays there for the rest of the navigation.

My question: how do you get a navigation menu to first be in one position, and move only after a trigger event (like the first click)?

Any help is GREATLY appreciated,

thanks,

Dirk

http://www.werkstette.dk/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options