Does anyone know of a way to create a multi coloured CSS Menu Nav in Freeway?
eg: http://www.sly-design.co.uk/multi-coloured-nav.png
Thanks,
Sly.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Sly,
Here’s an example of one way to do this;
http://www.freewayactions.com/test/css-menus-example/multi-coloredmen.html
It uses the standard CSS Menus Action and extends the menu items with their own CSS styles. I’ve used nth child selectors in the CSS to target the second, third, fourth, etc menu items which works on all browsers apart from (you guessed it) IE 6, 7 and 8. These browsers will see the plain single coloured menu on the right.
If you wanted a belt and braces approach to this and wanted to support these browsers then I’d suggest either creating a simple Action to style the menu items or use JavaScript in the browser to style them on the client side.
Regards,
Tim.
On 26 Aug 2011, at 13:34, Sly wrote:
Does anyone know of a way to create a multi coloured CSS Menu Nav in Freeway?
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
Tim,
That is so helpful thank you!
I don’t mind dropping support for IE6, but I don’t think the client will swallow losing IE7 & 8.
I can’t imagine how to create an Action to style the menu items.
But, I wonder if I could do as you’ve done but with class names rather than nth child. I assume class names are supported in IE 6, 7 & 8! (Joke, but not laughing!)
I’ll have a look into it.
Thanks a million for the working file and explanation.
Sly.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hello again,
For further info: I’ve managed to adapt Tim’s solution to work with class names rather than nth items, to enable IE compatibility.
Technique:
Highlight each link in the css menu, then >Edit>Hyperlink> then click Extended, click New: Name: class, Value: home (or an individual name for this link) click OK, OK, OK.
Repeat this for every link in the css menu.
Now you can target each link by adding css like this in the ‘Head’ and specifying a different colour:
#fwNav1 .fwNavItem a.home {background-color:#BDD648;}
#fwNav1 .fwNavItem a.solutions {background-color:red;}
#fwNav1 .fwNavItem a.hr {background-color:yellow;}
etc.
Being based on ‘class’ I’m pretty sure this will work in all versions of IE.
Thanks again Tim!
Sly.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Sly,
That’s a great solution. I must admit that it hadn’t occurred to me to add a class to the links rather than the list items.
As you say this should now work in pretty much any browser.
Regards,
Tim.
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
Thanks Tim,
fwCurrent taught me that.
Though slightly more buggering about than your neat solution, at least it panders to IE for now. Grrrr.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Sly,
The CSS Menus Action already creates class styles for the first and last menu items (fwFirstChild and fwLastChild). Assuming you leave one menu item as the base colour set in the CSS menus Action that leaves just three menu items that need targeting in your example.
I think your solution is great and should be consistent over all browsers which is the main thing.
If you get fed up of adding those classes to the links you may want to have a look at this;
http://www.freewayactions.com/test/multi-coloured-menu2/
I created a simple Action just before you sent your solution that adds class names (based on a base name) to all list items in a given list (like your menu). Although you still need to add the CSS to style these manually it should mean a lot less manually extending of links.
Regards,
Tim.
On 26 Aug 2011, at 16:42, Sly wrote:
Though slightly more buggering about than your neat solution, at least it panders to IE for now. Grrrr.
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
Tim, that is absolutely fabulous!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
