Create simple nav bar?

Mark2 · May 27, 2010, 4:11pm

I would like to create a simple nav bar but don’t know how to.

As you can see there is a bog standard horizontal nav bar. But I would like the buttons to change colour when rolled over. I don’t want the buttons to be graphic images, as this would mess up accessibility. And I don’t really want to use CSS layout/layers. So how do I do it??

THANKS

Mark

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

Tim3 · May 27, 2010, 5:13pm

Hi Mark,
Take a look at this Freeway 5 Pro file I put together to showcase the
use of the CSS Menus action that ships with Freeway;
http://www.freewayactions.com/test/CSSMenuExamples.zip

There are seven or so menus in there that you can pull apart or simply
copy and paste into your existing Freeway document. Hopefully it
should give you a head start in getting your menu where you want it to
be.
Regards,
Tim.

On 27 May 2010, at 17:11, Mark wrote:

I would like to create a simple nav bar but don’t know how to.

See UK.COM

As you can see there is a bog standard horizontal nav bar. But I
would like the buttons to change colour when rolled over. I don’t
want the buttons to be graphic images, as this would mess up
accessibility. And I don’t really want to use CSS layout/layers. So
how do I do it??

THANKS

Mark

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

Mark2 · May 28, 2010, 9:50am

Hello Tim

Thanks for your response, unfortunately I’m using Freeway 4 Pro which doesn’t have CSS Menu action.

Following your message I’ve tried using the Menu Bar action. Two issues. The button doesn’t act as a link, only the text inside the button. This isn’t conducive to good usability. And secondly the table border looks horrible with a 3D effect applied to it.

There must be a way to make a HTML box (as oppose to a graphic box) a link that can change colour when hovered over??

Thanks

Mark

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

Tim3 · May 28, 2010, 10:25am

Hi Mark,
OK I’ve just dusted off my copy of Freeway 4 and have reacquainted
myself with the Menu Bar action.
Here’s a simple example page that shows my menu bar and how I extended
it with a bit of CSS to allow the whole cell in the table to respond
to the menu link;
http://www.freewayactions.com/test/fw4-menu-bar/

The trick is to add the following code to the page using the Page/
HTML Markup dialog and insert the code at the Before end head point;

<style type="text/css">
<!--
a .DDMLinkSty { display:block }
-->
</style>

Regards,
Tim.

On 28 May 2010, at 10:50, Mark wrote:

Hello Tim

Thanks for your response, unfortunately I’m using Freeway 4 Pro
which doesn’t have CSS Menu action.

Following your message I’ve tried using the Menu Bar action. Two
issues. The button doesn’t act as a link, only the text inside the
button. This isn’t conducive to good usability. And secondly the
table border looks horrible with a 3D effect applied to it.

There must be a way to make a HTML box (as oppose to a graphic box)
a link that can change colour when hovered over??

Thanks

Mark

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

Mark2 · May 28, 2010, 11:08am

Hello Tim

That works brilliantly. Only thing is, how do I separate the blue buttons with a white line between them?

Adding a white border seems to add a horrible bevel edge.
Adding white cell spacing, looks fine, but if you hover over a button and move away without clicking it, the button turns white, i.e. is it possible for the table to have a different background colour to the cells?

Sorry for being a pain

Mark

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

Mark2 · May 28, 2010, 11:15am

Hello Tim

Just had a thought. Each button could be a table of one row and one column. I can then space the buttons, so that there is a white gap separating them… ?

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

Mark2 · May 28, 2010, 11:28am

Hello Tim

I’ve just tried the above approach, but only the last button/table works as a link. The other buttons/tables only the text within the button works as a link, not the whole button… argh!

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

Tim3 · May 28, 2010, 11:53am

Hi Mark,
I’ve updated the sample file at;
http://www.freewayactions.com/test/fw4-menu-bar/

You just need to remember to add a reference in the CSS for every menu
table cell in your menu bar (apart from the last cell). For example;
#DDMLink1, #DDMLink2, #DDMLink3, #DDMLink4 { border-right:1px solid
#ccc; }

Regards,
Tim.

On 28 May 2010, at 12:08, Mark wrote:

Hello Tim

That works brilliantly. Only thing is, how do I separate the blue
buttons with a white line between them?

Adding a white border seems to add a horrible bevel edge.
Adding white cell spacing, looks fine, but if you hover over a
button and move away without clicking it, the button turns white,
i.e. is it possible for the table to have a different background
colour to the cells?

Sorry for being a pain

Mark

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

Mark2 · May 28, 2010, 1:44pm

Hello Tim

Thanks for all your help.

This works fine, but on page 2 (for example) I don’t want the page 2 button to be a link (because the visitor is already on page 2). I’ve removed the hyperlink from the text in cell 2 of the table, but then when previewed the border-right isn’t showing… even worse, there is a vertical white line to the right of the text in cell 2.

And, the cell changes colour as if it is a link, even when it isn’t!

Surely there has to be an easier way of making a HTML box a link. I can then make my four buttons from four HTML boxes, with a rollover action, so they change colour with mouse over?

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

Tim3 · May 28, 2010, 3:13pm

Hi Mark,
What you are attempting to do may look easy but you can’t just wrap a
link around an HTML box and expect it to function like an image link.
You can achieve exactly what you want with the CSS Menus action and a
lot of thought and effort has gone into making complex navigation
structures like this very, very simple to construct. If you are going
to spend any real time with things like this in Freeway then the
upgrade will save you a lot of time with these.

You can approximate the effect you are after in FW 4 by using tables,
javascript and markup items which will do pretty much everything you
want but will make maintaining your nav bar a lot more time intensive.

For example;
http://www.freewayactions.com/test/fw4-menu-bar/simplemenu.html
and the Freeway file is here;
http://www.freewayactions.com/test/fw4-menu-bar/fw4menu.zip

Alternatively find the menu you like online from one of the many menu
generator sites out there (like this: http://www.cssmenumaker.com/horizontal_css_menu.php)
and paste the markup into your Freeway page.
Regards,
Tim.

On 28 May 2010, at 14:44, Mark wrote:

Hello Tim

Thanks for all your help.

This works fine, but on page 2 (for example) I don’t want the page 2
button to be a link (because the visitor is already on page 2). I’ve
removed the hyperlink from the text in cell 2 of the table, but then
when previewed the border-right isn’t showing… even worse, there
is a vertical white line to the right of the text in cell 2.

And, the cell changes colour as if it is a link, even when it isn’t!

Surely there has to be an easier way of making a HTML box a link. I
can then make my four buttons from four HTML boxes, with a rollover
action, so they change colour with mouse over?

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

Keith_Martin · May 28, 2010, 3:27pm

If you are going to spend any real time with things like this in
Freeway then the upgrade will save you a lot of time with these.

Definitely. If you can put a monetary value on your time, the upgrade
cost probably would be paid back quite soon just from this feature
alone.

k

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

Gray_Owl · May 28, 2010, 4:11pm

Alternatively find the menu you like online from one of the many menu
generator sites out there (like this: http://www.cssmenumaker.com/horizontal_css_menu.php)
and paste the markup into your Freeway page.
Regards,
Tim.

Hi

This link works http://www.cssmenumaker.com/horizontal_css_menu.php

Regards

Lee

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

Mark2 · June 4, 2010, 9:04am

Hello Tim

Thanks for all your help. I wasn’t aware of the CSS Menu action. I’ve upgraded to version 5 and you’re right it is a synch making menus with this action.

Thank you

Mark

Hi Mark,
What you are attempting to do may look easy but you can’t just wrap a
link around an HTML box and expect it to function like an image link.
You can achieve exactly what you want with the CSS Menus action and a
lot of thought and effort has gone into making complex navigation
structures like this very, very simple to construct. If you are going
to spend any real time with things like this in Freeway then the
upgrade will save you a lot of time with these.

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