You can do this automagically with a bit of JavaScript. Just set all of the pages up to use the same link styles all the way through. Make sure that you have completely un-styled type in your links box, and set all of the styling using the box’s Style pane in the links segment of the inspector. The goal here is to avoid having inline styles in your list of links – which is what usually happens if you select some text and try to style it directly where there are links involved.
With your basic link styles set, you will override the links that point to the current page with a little extra styling magic. Create a new style using the Styles palette. In the Tag field, type .current and then tab into the Name field and delete whatever Freeway put there by default. Then be sure to tab back out so Freeway remembers that you don’t want to have a name on this style. (Very important.) In the Character part of the New Style dialog, add the color of your choice, red for example. Save this style with the OK button. You won’t need to apply this style to anything directly in Freeway – it will be applied automatically as follows.
Apply the Protaculous Action to your page, and choose the prototype-packed library from the picker. In the top Function Body editor, paste the following code:
var me = window.location.href.sub('index.html','');
$$('a').select(function(elm){
return me.include(elm.href.sub('index.html',''));
}).addClassName('current');
What this does is look through the entire page for links, compare them to the current page URL, and see if they are a partial or exact match. In the case of a set of links like this:
products
salsa
oven mitts
company
service
support
contact
if you were on the page http://example.com/company/contact.html, links for company/index.html and company/contact.html would both include the string company/ so they would light up red.
Now searching the entire page for links may be too wide-ranging. This would also light up “utility” links in your page header or footer, or maybe graphics that are linked like this. To “scope” the search to only a small part of your page, you can modify the function that selects all the links so it only looks in one box. Click on your navigation area and not what Freeway reports in the Title field of the HTML Element Inspector. Let’s say it’s item42 or something like that. Just add that to the beginning of this line, like so:
$$('#item42 a').select …
Adding the # at the beginning of the ID (which Freeway reports as the Title) makes this a proper CSS selector for all a (link) elements inside that box only. This will have the additional benefit of speeding up the search, so there’s less chance of a “Flash of Unstyled Content” showing in really slow browsers on really fast connections.
Walter
On Sep 1, 2012, at 1:21 AM, Aaron Corey wrote:
OK, I got the navigation working and the menus showing/disappearing using both of the methods you described above.
However, my new challenge is getting the colors to behave as I’d like. I basically built the example you have above in a single HTML box. Where I am tripping up is, for instance, when on sub-topic 1 of Page 2, I want “sub-topic 1” to be my current page color (red), “Page 2” to also be red (establishing the trail) AND “Page 2” to retain link behaviors so that the hover color works.
I can accomplish the first of those by disabling the link and coloring the text on the current page. However, I can’t figure out how to retain link behaviors on just the “Page 2” header while changing it’s native color to red - without affecting all of the other headers in the box similarly.
Is there a way for me to do this in a single HTML box, or do I now need to look at making many separate HTML items for the navigation and just manually changing the styles for each item?
I’m pretty confident
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options