[Pro] Menu effect

Does anyone know how this effect is done with the menu when the page is scrolled? Is this some query, an action?

Billy

http://www.ontwerpzaam.nl


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

This is (just) a few lines of javascript and css. If you wish I can handle over a stripped file.

The site itself is still in development, but we wanted to show a FW7 example on the SP site just as I went on vacation :slight_smile:

Richard


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

I would really appreciate that.

Thanks Richard.

Billy


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

Excellent work Rich - kinda thing I’d like to see way more often these days.

Cheers

Thomas


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

The uploaded file has an inline box model construction. That’s how I work, and this way feels good, solid, reliable for me.

Here is the stripped down file: http://fwdemo.rvanheukelum.com/menu-changes-on-scroll.zip

The CSS necessary for the menu (effect) to work needs it’s ‘name’ to be entered in the Tag field rather than in the Name field. Why, you ask? Well, Freeway tends only to register Name styles in the stylesheet that have been assigned. It will however register all Tag styles. Would you -in this case- enter he names into the Name field, a couple of styles just won’t make it on the stylesheet. We need them, so to make sure they are present on the stylesheet, just use the Tag field. You will need to enter the dot/period before the name yourself though.

In the Page HTML Markup you will need to call for a query library and load the script. This script will monitor a trigger (I’ve used obvious names for my convenience). As soon as the top of the div which functions as trigger reaches the top of the viewport, the script will add a name style to the target (the nag container which contains the css menu ‘nag’). This will change the appearance of the nag-container. The fading is done via ‘transition:background-color’. Because this is applied to both states it works both ways.

A while ago I asked for a simple action which adds after each div closing tag. Walter Davis wrote it, I’ll add the action to the download file.

I hope you’ll find it useful.

Richard


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

nag = nav


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

Hi Richard, do you have a FW6 version you could share? have managed to get to work but not fading out again when scrolling back down page. think due to responsive css menu in 6 maybe?.


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