[Pro] Navigation/Accordion Help Needed

Freeway
1

Please see the example link below for the type of navigation I am trying to accomplish. Softpress told me I could achieve this using a combination of simple rollovers (for the top two main nav items) and accordions for the remote drop-down menus below.

I have tried numerous combinations and have not been successful replicating all of the behaviors I see here at the same time - such as:
- remote sub-menu stays open while I click among it’s various links,
- all stops in the navigation path remain the same font color (as in “who we are”/“people”/“Karl Schloesser” all shown in red),
- the simple formatting shown (as opposed to the standard formatting that CSS Menus want to subject me to), etc…

I am a newbie Freeway Pro user and do not know my way around code, but I am fairly intuitive, have read the manual, and spent countless hours of trial and error on this.

I am willing to press forward, but really need to know if I can achieve all of these elements using the standard action set available through Freeway and third parties. If so, any direction would be appreciated. If not, I would value your opinion on which navigation tools would get me as close to this one as possible in an efficient/effective manner.

Many thanks,

Aaron

http://paragraphinc.com

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

2

Yes, this is build able using Freeway Pro’s core Actions plus the Scripty Accordion Action. I just copied and pasted one of the pages from this very nice site (and from right up the street from me in Philadelphia!) into Freeway, and fiddled around with the styling a bit. I made the three headers (business, consumer, non-profit) as h3 and the rest of the text as unordered lists (using the List tool in the Inspector).

I only took a little time with styling it, but you really can get all the way there with some extra css styles.

Download the Freeway file here: http://scripty.walterdavisstudio.com/navigation.freeway.zip

This is just one page, and I didn’t bother to add links to the text, but that’s trivial to do. Now if you are building this across a bunch of pages, you would have to duplicate this element (add it to the Master Page) on every page, and set the current page as an unlinked red text. When you are opening a page in the business section, you would set the “Show element open when the page loads” picker to 1 instead of 2 (or 3, if you are in the non-profit section).

Look carefully at the styles I created. I only applied one of them directly to the navigation element, the other three are “Tag-only” styles, which apply automatically.

Walter

On Aug 20, 2012, at 5:19 PM, Aaron Corey wrote:

I am willing to press forward, but really need to know if I can achieve all of these elements using the standard action set available through Freeway and third parties. If so, any direction would be appreciated. If not, I would value your opinion on which navigation tools would get me as close to this one as possible in an efficient/effective manner.

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

3

Walter - thanks for the quick reply. You’ve given me hope! I will put a study on your answer and the file you provided later tonight and in the morning. I’ll let you know how I fare.

Thanks again,

Aaron

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

4

Walter - I got the accordion action figured out for what I will call the remote sub-menus below the top two stationary main nav items (“who we are”, “what we do”). Many thanks for that.

Now, is there a way for me to retain the HTML nature of the top two main nav items (I believe this is important for web search reasons) and still use them to trigger show/hide of the remote accordion items?

I have accomplished this action by making the top main nav items into graphic text with Rollover and applying the Target Show/Hide Layer" action to the accordion items, but I can;t figure out how to do it with the top two nav items as HTML.

Any ideas for me on that? Or am I overestimating the importance of keeping those top two nav items as HTML?

Please let me know your thoughts.

Thanks,

Aaron

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

5

Now if you are building this across a bunch of pages, you would have to duplicate this element (add it to the Master Page) on every page, and set the current page as an unlinked red text.

Do I understand correctly that your above comment regarding “set the current page as an unlinked red text” refers to simply going in page-by-page (once all the master actions are correct) and setting the red font color for the various links that I want to show as a red “path”?

I have tried to accomplish this automatically using the CSS Menu “Highlight Current Page” feature, but see that I cannot apply CSS Menu options to my accordion lists.

Is there, in fact, another automated way to accomplish this or is it, truly, a page-by-page manual task?

Please let me know if I understand this correctly.

Thanks,

Aaron

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

6

Now if you are building this across a bunch of pages, you would have to duplicate this element (add it to the Master Page) on every page, and set the current page as an unlinked red text.

Do I understand correctly that your above comment regarding “set the current page as an unlinked red text” refers to simply going in page-by-page (once all the master actions are correct) and setting the red font color for the various links that I want to show as a red “path”?

I have tried to accomplish this automatically using the CSS Menu “Highlight Current Page” feature, but see that I cannot apply CSS Menu options to my accordion lists.

Is there, in fact, another automated way to accomplish this or is it, truly, a page-by-page manual task?

Please let me know if I understand this correctly.

Thanks,

Aaron

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

7

On Aug 21, 2012, at 12:30 PM, Aaron Corey wrote:

Now if you are building this across a bunch of pages, you would have to duplicate this element (add it to the Master Page) on every page, and set the current page as an unlinked red text.

Do I understand correctly that your above comment regarding “set the current page as an unlinked red text” refers to simply going in page-by-page (once all the master actions are correct) and setting the red font color for the various links that I want to show as a red “path”?

I have tried to accomplish this automatically using the CSS Menu “Highlight Current Page” feature, but see that I cannot apply CSS Menu options to my accordion lists.

Right, those two Actions do separate things. It is completely possible to create a menu that looks like this one using the CSS Menus Action, but it won’t behave this way (no graceful animation).

Is there, in fact, another automated way to accomplish this or is it, truly, a page-by-page manual task?

Sorry, it’s manual. I would make three different master pages (one for each submenu shown open in the example) and work from there. Each master would have all pages linked, and then each child would simply have the one link that is current removed and made red.

There is a way to automate this in JavaScript on your site, so you could leave all of the pages linked on all pages, and then add a class-based rule to your stylesheet to do the following:

.active {
	cursor: default; /*remove the link behavior*/
	color: red;
	font-style: bold;
}

Then add the following script to the page using the Protaculous Action (choose the Prototype-packed library, click the top Function Body button and paste):

var here = window.location.href.toString();
$$('a[href]').select(function(link){
	return (here.include(link.href.toString()));
}).invoke('addClassName', 'active');

Line-by-line, here’s what it does:

1. Cache the current page address, so you only look it up once.
2. Select all of the links on the page, set up a filter that…
3. Only chooses a link that points to the current page.
4. With each member of that select set of links (maybe only one) adds the active class to it.

Walter

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

8

On 21 Aug 2012, 4:15 pm, Aaron Corey wrote:

Walter - I got the accordion action figured out for what I will call the remote sub-menus below the top two stationary main nav items (“who we are”, “what we do”). Many thanks for that.

Now, is there a way for me to retain the HTML nature of the top two main nav items (I believe this is important for web search reasons) and still use them to trigger show/hide of the remote accordion items?

I have accomplished this action by making the top main nav items into graphic text with Rollover and applying the Target Show/Hide Layer" action to the accordion items, but I can;t figure out how to do it with the top two nav items as HTML.

Any ideas for me on that? Or am I overestimating the importance of keeping those top two nav items as HTML?

Please let me know your thoughts.

Thanks,

Aaron

Walter - I think I buried this question with subsequent posts. Could you also comment on this one?

Thanks, Aaron

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

9

On 21 Aug 2012, 4:15 pm, Aaron Corey wrote:

Walter - I got the accordion action figured out for what I will call the remote sub-menus below the top two stationary main nav items (“who we are”, “what we do”). Many thanks for that.

Now, is there a way for me to retain the HTML nature of the top two main nav items (I believe this is important for web search reasons) and still use them to trigger show/hide of the remote accordion items?

I have accomplished this action by making the top main nav items into graphic text with Rollover and applying the Target Show/Hide Layer" action to the accordion items, but I can;t figure out how to do it with the top two nav items as HTML.

Any ideas for me on that? Or am I overestimating the importance of keeping those top two nav items as HTML?

Please let me know your thoughts.

Thanks,

Aaron

Walter - I think I buried this question with subsequent posts. Could you also comment on this one?

Thanks, Aaron

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

10

On Aug 21, 2012, at 1:32 PM, Aaron Corey wrote:

On 21 Aug 2012, 4:15 pm, Aaron Corey wrote:

Walter - I got the accordion action figured out for what I will call the remote sub-menus below the top two stationary main nav items (“who we are”, “what we do”). Many thanks for that.

Now, is there a way for me to retain the HTML nature of the top two main nav items (I believe this is important for web search reasons) and still use them to trigger show/hide of the remote accordion items?

Well, they could just be normal links. You can have an entire page for each state of these links, and link to it. If you want to have them trigger Target Show/Hide Layer or similar, just use the Text Rollover Action. You insert it inline in an HTML box, set the link text in the Action palette, and use the Style tab of the Inspector, Links segment, to set the text style for the generated links.

I have accomplished this action by making the top main nav items into graphic text with Rollover and applying the Target Show/Hide Layer" action to the accordion items, but I can;t figure out how to do it with the top two nav items as HTML.

See above, but I don’t think you need to have more than one Accordion on the page to duplicate the layout you linked to. One accordion with three headers and three inline sets of sub-links will do the trick. Use the “Show open” picker to select which sub-link set should be visible, as in my example document. The links in the example you posted are actual links to separate pages – look at the URL in the location field in your browser when you click either of them.

Walter

Any ideas for me on that? Or am I overestimating the importance of keeping those top two nav items as HTML?

Please let me know your thoughts.

Thanks,

Aaron

Walter - I think I buried this question with subsequent posts. Could you also comment on this one?

Thanks, Aaron

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

11

I tried Text Rollover, but only saw mouseover as an option to trigger, not click. That’s why I didn’t pursue it. Am I missing something there, or is that, in fact, a limitation of that action?

Aaron

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

12

I tried Text Rollover, but only saw mouseover as an option to trigger, not click. That’s why I didn’t pursue it. Am I missing something there, or is that, in fact, a limitation of that action?

Aaron

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

13

Yes it is. But what you’re missing is that you don’t need rollover at all here and you don’t need Target Show/Hide Layer either. These are separate pages – and they ought to be, because they are filled with specific content that ought to be reachable from a separate URL than other pages with different content. Using Rollover and Target Show/Hide Layer would build a combo page with all of the dissimilar content mashed together into a single page, and visitors would have no way to navigate directly to a subset of that information – only to link to the top level and have to navigate within the page to one of the individual content areas.

Walter

On Aug 21, 2012, at 2:11 PM, Aaron Corey wrote:

I tried Text Rollover, but only saw mouseover as an option to trigger, not click. That’s why I didn’t pursue it. Am I missing something there, or is that, in fact, a limitation of that action?

Aaron

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

14

Yes, the fog is clearing on that concept now. I took your previous advice and set up whole new structure with multiple Masters. The process of doing so has helped me understand what you mean. I appreciate you pulling me backwards out of the rabbit hole I was trying to burrow into.

By the way, is bold font built into the header style in the ScriptyAccordion or are my eyes playing tricks on me? If so, is there a way I can disable it?

Aaron

P.S. Your patience and willingness to assist is remarkable and incredibly appreciated.

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

15

Yes, the fog is clearing on that concept now. I took your previous advice and set up whole new structure with multiple Masters. The process of doing so has helped me understand what you mean. I appreciate you pulling me backwards out of the rabbit hole I was trying to burrow into.

By the way, is bold font built into the header style in the ScriptyAccordion or are my eyes playing tricks on me? If so, is there a way I can disable it?

Aaron

P.S. Your patience and willingness to assist is remarkable and incredibly appreciated.

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

16

On Aug 21, 2012, at 3:00 PM, Aaron Corey wrote:

Yes, the fog is clearing on that concept now. I took your previous advice and set up whole new structure with multiple Masters. The process of doing so has helped me understand what you mean. I appreciate you pulling me backwards out of the rabbit hole I was trying to burrow into.

By the way, is bold font built into the header style in the ScriptyAccordion or are my eyes playing tricks on me? If so, is there a way I can disable it?

Bold is built into headers in /browsers/ and Freeway doesn’t make it particularly easy to remove. In order to remove the bold from an Hn style, you would imagine that you could open up that style, un-click the B in the font style attribute, and you would have normal text. But to do this, you need to click the Extended button and then add two new attributes (click new for each one, add the name/value pair, then okay):

font-style: normal;
font-weight: normal;

Enter only the name (the part left of the colon) in the Name field (no colon) and only the value (the part right of the colon, and not including the semi-colon) in the Value field. If you see other CSS things you want to add in books or blog posts, follow this method to translate from CSS to Freeway-flavored CSS.

Walter

Aaron

P.S. Your patience and willingness to assist is remarkable and incredibly appreciated.

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