I need to create a menu like this

Freeway
1

I need to create a menu something like this:

http://pgt7.com/freeway/ShipMenu.png

Where the move hover changes both the density of the blue and the grey.

Best wishes Peter

–

================================
Peter Tucker, Oxford UK email@hidden

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

2

Peter,

It looks like a graphic rollover. Just think of a long graphic box being Blue with another grey box on the end. The rollover being similar with different colours.

To make this just in Freeway, create the blue box with text, and a second grey box on the end, select both boxes and export as a gif. Change the colours and export the two boxes again as a gif for your rollover state. Import the graphics again to compile your rollover in just two graphic boxes.

Put all your master graphic on an other page if you need to go back and edit later.

Daqvid

On 2 Sep 2008, at 16:28, Peter Tucker wrote:

I need to create a menu something like this:

http://pgt7.com/freeway/ShipMenu.png

Where the move hover changes both the density of the blue and the grey.

Best wishes Peter

–

================================
Peter Tucker, Oxford UK email@hidden

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

David Owen

http://www.ineedwebhosting.co.uk

3

The simplest way to do this would be to make the button image include the gray part. Then when the rollover happens, the entire button image gets replaced, and the gray part changes “for free”. You could also use the CSS Sprite technique to do this, rather than using the JavaScript rollover. Have a look at this example (the CSS is inline, so you can see it easily by viewing source).

http://www.walterdavisstudio.com/demo/menu.html

Walter

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

4

Thanks David and Walter,

Perhaps I should have made it more specific, I have previously done
something similar using JavaScript.

I was rather hoping to use the full CSS method to achieve this, so the
description below is really helpful start, but it would be even more helpful
if I were able to see just how it was implemented in Freeway, would you be
happy to share the Freeway source file?

on 02/09/2008 17:23, Walter Lee Davis at email@hidden wrote:

The simplest way to do this would be to make the button image include the gray
part. Then when the rollover happens, the entire button image gets replaced,
and the gray part changes “for free”. You could also use the CSS Sprite
technique to do this, rather than using the JavaScript rollover. Have a look
at this example (the CSS is inline, so you can see it easily by viewing
source).

http://www.walterdavisstudio.com/demo/menu.html

Walter

Best wishes Peter

–

================================
Peter Tucker, Oxford UK email@hidden

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

5

No problem Peter

BTW, the Freeway rollover way I was suggesting is done with javascript - Freeway will do the javascript bit for you behind the scenes.

But the CSS method Walter was suggesting could be neater solution (quicker download) if only using only a single image being moved left to right etc. displaying the different states of the rollover. But it could be said CSS a bit more fiddly to set up in Freeway in styles.

David

On 2 Sep 2008, at 18:24, Peter Tucker wrote:

Thanks David and Walter,

Perhaps I should have made it more specific, I have previously done

something similar using JavaScript.

David Owen

http://www.ineedwebhosting.co.uk

6

Well, this demo I did by hand, but you could do it in Freeway using a similar technique. The only change (since you can’t add IDs to lists in Freeway) is to make the rule that targets the list use its parent ID for access, rather than the ID of the list. So instead of:

#nav, #nav li { ... }

you would use:

#nav ul, #nav li { ... }

Here’s a Freeway file demonstrating the technique. Note that the text looks invisible in the design view because it’s been styled white on a white background. If you click on the “nav” HTML box, you will see the text appear. The menu image is zipped in along with the Freeway file. Everything looks and works correctly in the Preview mode or in a browser.

http://www.walterdavisstudio.com/demo/menu.zip

Walter

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

7

Two things to realize about this trick:

One, the only reason it works is because I named the box containing the menu list “nav”, and two, I manually created tag-only styles with exactly the same name.

Tag-only styles do not get applied to anything. You create them in the Styles palette, and then rely on the “cascade” part of CSS (Cascading Style Sheets) to apply them for you.

Freeway will always publish styles that do not have anything in their Name field (whether or not they are applied to anything), but it makes it pretty hard for you to create them in the first place. The trick is to enter whatever you need in the Tag field of the New/Edit Style dialog, then tab into the Name field, delete style1 or whatever Freeway has auto-entered in there, then tab out again. If you skip that last step, then styleN will creep right back in.

Walter

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

8

on 02/09/2008 19:14, Walter Lee Davis at email@hidden wrote:

Two things to realize about this trick:

Now I understand [a little] more about CSS, many thanks.

You need an iBeer ;~}}

Best wishes Peter

–

================================
Peter Tucker, Oxford UK email@hidden

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