Hi, I’m in fairly uncharted territory here but enjoying building my new freeway pro site so far.
I’m trying to assign a moving text/graphic (?) effect to my menu links. Something very similar to what Freeway Pro has on it’s own Welcome screen eg. when you hover over each link on the right of the pop-up window the Text shakes and moves over a few millimetres to the right until you click on the hyperlink.
I like this effect and would be keen to hear how it’s done -or- a similar effect that anyone has used which makes text links more interactive.
The menu you mention uses the CSS Menus Action. The transition effects (the sliding) is a WebKit only effect (Safari, Chrome, WebKit etc) and we can use these to their full advantage within the welcome screen because it runs using a WebKit window. The transitions were added as extra CSS styles.
Hi Tim, and thanks very much for your quick reply.
Unfortunately I’m struggling to follow the menu examples you attached in a meaningful way and think I’m more in need of a ‘dummies’ guide to trying out these transition effects. Are you or anyone able to list a quick ‘run through’ for me explaining the menu actions in sequence?
Brilliant if you can!
Thanks also for the clarification on Webkit vs non-Webkit browsers, that very helpful!
OK I’ll try my best to explain this. If you download the Freeway document I mentioned (http://www.freewayactions.com/test/css-menus-example/softpress.com.html) and take a look at the Softpress.com page you’ll see that it contains a standard CSS Menus Action item called ‘nav’.
This will generate the a standard CSS menu. The transition animation is added using a block of CSS markup added to the page in the Page > HTML Markup dialog.
Here’s what you will see;
This is a CSS style block that extends the standard styles created with the CSS Menus Action and adds the menu movement and animation.
The first line (#fwNav1 .fwNavItem a:hover { margin-left:10px }) makes the menu items move over to the right by 10 pixels when moused over. It does this by adding 10 pixels to the menu’s left margin.
The second line contains the style for the transition and tells the browser to animate the transition between the normal and the mouse-over states over half a second. A Google search of WebKit transitions should return the full list of effects.
At the moment you’ll have to extend your menus manually with styles like this. My hope is that we can provide an interface for these effects either through the application of an Action at some point in the future.
Regards,
Tim.
On 23 Jun 2011, at 15:26, Pridmol wrote:
Hi Tim, and thanks very much for your quick reply.
Unfortunately I’m struggling to follow the menu examples you attached in a meaningful way and think I’m more in need of a ‘dummies’ guide to trying out these transition effects. Are you or anyone able to list a quick ‘run through’ for me explaining the menu actions in sequence?
Hi Tim, many thanks for your patience and extra time in explaining.
I’ve had some partial success, in that I’ve got the transition working (v pleased!) but for some reason changing the hover and click styles/colours seems to be evading me unfortunately. Should I not just be able to select the colours I want in the Links section of the CSS Actions menu? Or are you saying above that this is not possible when combined with a CSS Style Block? (apologies if this makes no logical sense … I’m attempting to learn a new language. very best,
In the example Freeway document we’ve been looking at the extra CSS that I added as a markup item simply moves the menu items over and animates them while doing it. It doesn’t change the link styles at all. The link styles should be defined using the CSS Menus Action interface as this will allow you to see all of the link states for the menu. If you can upload the site page you have at the moment and point me to a URL then it may make things easier for me to see what effect you are after.
Regards,
Tim.
On 24 Jun 2011, at 11:28, Pridmol wrote:
I’ve had some partial success, in that I’ve got the transition working (v pleased!) but for some reason changing the hover and click styles/colours seems to be evading me unfortunately. Should I not just be able to select the colours I want in the Links section of the CSS Actions menu? Or are you saying above that this is not possible when combined with a CSS Style Block? (apologies if this makes no logical sense … I’m attempting to learn a new language. very best
