Synopsis:
Building site navigation can be a nightmare sometimes. This tutorial delves into some basic concepts that you can use to build better navigations. We'll explore some simple structures in use in all Frabjous(tm) websites. Then we'll talk about some more complex examples.
Foreword:
I'll be using the 'unordered bulleted list' to build some of these navigation structures. This is simply because using CSS in conjunction with these lists, it'd be easy enough to style these lists into all sorts of things, such as tabs, or either horizontal or vertical navigation. If you feel that this is out of reach, then you might want to have a look at some lessons on the web on how CSS works with lists. The CSS involved is beyond the scope of this tutorial. We're only interested in the structure or 'markup' required to make them happen here.
Some CSS resources for your list structures
- some tabs examples to borrow css code from
http://www.exploding-boy.com/images/cssmenus/menus.html
- some css for lists
http://css.maxdesign.com.au/listamatic/
Please note that these pages aren't for simple drop in and useage. The markup here will require some tinkering. I've had most of these styles grafted onto Actinic lists with little trouble, so, its all good.
About your Navigation
In tutorial one, we made a simple list of major sections. Lets look at it again.
This code makes a simple 'ul' list, with links. This is the basis of most navigations. This list can be made into tabs, or any thing with css, horizontal or vertical.
Every section in Actinic has an ID, or a unique number that can identify it. We'll be using that to lock onto certain sections. Here is a list of useful variables we'll be using. Each time the main loop runs around our code, these variables are available within the scope of our loop.
SectionID:
This variable is unique, meaning that each section has a different ID and no two can be the same.
SectionLevel:
This represents the depth of the section. For example, all your major sections have a SectionLevel of 1. Every subsection of the root sections, have a SectionLevel of 2, and so on.
What about drop downs?
You can make a set of dropdown using this technique. Lets take a look.
OOF! looks complicated. Whats going on? Well, in this example, we use javascript to trigger navigation, when the user clicks an item in the list. This list shows only major sections.
...this part activates when they click an option. It takes the 'value' part of the option, and sends the browser to it. Nice and compact.
The rest is all about customer logins, for those people that use that.
Display all sections in this list?
Well, you'd have to simply relax the block surrounding the 'options' in our list. At the moment, the list is set to loop only the top level, or 'root' sections. Lets change that.
As you can see, it prints out all sections, regardless of their depth. But notice their order. It recurses (loops) through the subsections, before returning to the section above it. This is important, and we'll get back to that later...
What about Breadcrumbs?
Well, try this code:
Nice and simple. But this can be the basis of some other more interesting structures. This uses ParentSectionList, as a block type, to backtrack through the sections we used to get here.
With thanks to Gabriel Crowe of Interact Studio
Building site navigation can be a nightmare sometimes. This tutorial delves into some basic concepts that you can use to build better navigations. We'll explore some simple structures in use in all Frabjous(tm) websites. Then we'll talk about some more complex examples.
Foreword:
I'll be using the 'unordered bulleted list' to build some of these navigation structures. This is simply because using CSS in conjunction with these lists, it'd be easy enough to style these lists into all sorts of things, such as tabs, or either horizontal or vertical navigation. If you feel that this is out of reach, then you might want to have a look at some lessons on the web on how CSS works with lists. The CSS involved is beyond the scope of this tutorial. We're only interested in the structure or 'markup' required to make them happen here.
Some CSS resources for your list structures
- some tabs examples to borrow css code from
http://www.exploding-boy.com/images/cssmenus/menus.html
- some css for lists
http://css.maxdesign.com.au/listamatic/
Please note that these pages aren't for simple drop in and useage. The markup here will require some tinkering. I've had most of these styles grafted onto Actinic lists with little trouble, so, its all good.
About your Navigation
In tutorial one, we made a simple list of major sections. Lets look at it again.
HTML Code:
<ul> <actinic:block type="EntireSectionList"> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3c%3d%20%202" > <li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a> </actinic:block> </actinic:block> </ul>
Every section in Actinic has an ID, or a unique number that can identify it. We'll be using that to lock onto certain sections. Here is a list of useful variables we'll be using. Each time the main loop runs around our code, these variables are available within the scope of our loop.
SectionID:
This variable is unique, meaning that each section has a different ID and no two can be the same.
SectionLevel:
This represents the depth of the section. For example, all your major sections have a SectionLevel of 1. Every subsection of the root sections, have a SectionLevel of 2, and so on.
What about drop downs?
You can make a set of dropdown using this technique. Lets take a look.
HTML Code:
<select onchange="window.location=this.options[this.selectedIndex].value"> <actinic:block type="TopLevelSectionList" > <option value="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>"> <Actinic:Variable Name="SectionName"/> </option> </actinic:block> </select>
HTML Code:
<select onchange="window.location=this.options[this.selectedIndex].value">
The rest is all about customer logins, for those people that use that.
Display all sections in this list?
Well, you'd have to simply relax the block surrounding the 'options' in our list. At the moment, the list is set to loop only the top level, or 'root' sections. Lets change that.
HTML Code:
<actinic:block type="EntireSectionList" >Try this: <select onchange="window.location=this.options[this.selectedIndex].value"> <actinic:block type="EntireSectionList" > <option value="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>"> <Actinic:Variable Name="SectionName"/> </option> </actinic:block> </select>
What about Breadcrumbs?
Well, try this code:
HTML Code:
Breadcrumbs: <actinic:block type="ParentSectionList" > » <actinic:variable name="SectionName" /> </actinic:block>
With thanks to Gabriel Crowe of Interact Studio