Horizontal Menu in footer

[cren]

Hi,

I'm trying to add a horizontal menu to my footer area but would prefer to show a list of top level categories horizontally with the child sub-category of each below the parent.

Is this possible with actinic variables/layouts as I dont really want to have to hard code this due to ever changing sections.

[NormanRouxel]

See the Advanced Guide refarding Advanced List Functionality. You can buld this with a TopLevelSectionList for each top item and a ChildSectionList for the inner items.

There are other articles there regarding site navigation that you can crib from.

[cren]

Thanks Norman,

I created a new ToplevelSectionList layout and added the relevent code and variables you referred to in there and it works like a charm. Thanks for the pointer.

[graphicz]

Do you fancy posting the code? Might be handy?

[cren]

Sure,

The way I did this was to create a new layout selector by copying 'Top Level Selection List' in Design>Library>Layouts>Top Level Section Lists.

I called this 'FooterCategoryLinkSelector'. (Now changeable from Site Settings>Layout)

I then created a new layout by copying the 'Standard Top Level Section List' and editing it to call this 'FooterCategoryLinkLayout'.

I then edited FooterCategoryLinkSelector to change the 'Initial Value' field to pick the 'FooterCategoryLinkLayout'

Then edit FooterCategoryLinkLayout to include the following code:

<actinic:variable name="TopLevelSectionLink" />
<br/>
<actinic:block type="ChildSectionList" >
<a href="<actinic:variable Name="SectionPageName"/>">
<actinic:variable Name="SectionName"/>
</a>
<br />
</actinic:block>

You can then navigate to the layout in design view and click the 'Click here to edit list layout settings' where you can add divs, tables, ul etc around the links.

My need was quite simple so the code above just puts the child below the parent and I altered the layout settings to place each parent/child in a new table cell but you could easily adjust this to put the parents into an <li> tag with each child in a seperate list.

Hopefully that's clearer than mud!

[graphicz]

Nice! Thank you.

[cren]

I decided to expand on this last night as I decided if I could get 3 section levels deep with nested <ul> tags I could use this to dynamically build my navigation menu.

I created a new layout called NavBar (copied 'Standard Top Level Section List')

Opened the new layout and clicked the 'Click here to edit list layout settings' link and in the 'Overall Design' tab entered <ul> for the 'Start of List' and </ul> for the 'End of List'

On the 'Edit Rows and Columns' tab I added <li>and</li> to the 'First Item' 'Middle Items' and 'Last Item' 'Before' and 'After' fields.

I then amended the code for the NavBar layout to:

<actinic:variable name="TopLevelSectionLink" />

<actinic:block type="ChildSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%20%3d%3d%20%22%22">
	<ul>
</actinic:block>
<li><a href="<actinic:variable Name="SectionPageName"/>" class="product_section"><actinic:variable Name="SectionName"/></a>

<actinic:block type="ChildSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%20%3d%3d%20%22%22">
	<ul>
</actinic:block>
<li><a href="<actinic:variable Name="SectionPageName"/>" class="product_section"><actinic:variable Name="SectionName"/></a></li>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNameNext%22%20%2f%3e%20%20%3d%3d%20%22%22">
	</ul>
</actinic:block>
</actinic:block>

</li>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionNameNext%22%20%2f%3e%20%20%3d%3d%20%22%22">
	</ul>
</actinic:block>
</actinic:block>

Then in my code I inserted the new NavBar layout and get a nice nested 3 level deep list.

I imagine you could also use it as a sitemap type layout.

I thought i'd post this in case it helps anyone else and also to remind me how I did it when I inevitably forget!

[NormanRouxel]

I've done lots of similar things.

See http://www.drillpine.biz/v10-multicolumn_menu/acatalog/ where a dynamic Mega Menu is automatically created (try the Electronics link).

There's also some conditional code that lets you specify how many sub-items to display with a "See all..." type link being automatically created if the limit is exceeded.