Synopsis
Here, we'll discover some black magic secrets to get some snazzy structures out of your navigations. Please note that some examples here are from the Advanced User Guide and other places on the Actinic Community. This is simply so that I don't have to re-write already working code. Credit, where credit is due.
In the last tutorial I gave some structures that we'll be working on. Some lists, some dropdowns and some breadcrumbs. Now we'll step it up a notch. Get your crash helmet on.
Lets get some sub sections in there
Until now, we've dealt with a simple set of items from a simple list. With our products, we used conditions to decide what items should go into our list (block), and this is also very possible with our navigation. We can use the variables provided to build nested lists. There are a couple of ways to go about this and some compound methods, but basically:
Faking it:
We can take the items and based on the amount of depth in the section tree, we can introduce fake spaces, and other tricks, to make the list look like its nested. In reality, its actually one list, with a simple structure. Lets look at an example.
Lets break this down:
First of all, the initial block tells Actinic to loop through the entire list of sections. Every single one in the catalog, regardless of the depth.
Next block, tells Actinic to only write out its contents, when the section depth is 2 or less. Making a fake list, 2 items deep.
There are sets of blocks next all in a row. These decide if a couple of spaces are used. These 'if' blocks only trigger if a depth is equal to or less than a certain number. My example assumes that your shop goes 4 sections deep. You might think that it's pointless to do this, when we have blocked every section below 2 deep anyhow, but I have left them in there, so that it's very easy to expand that 3rd or even the fourth section with a simple change to the outer blockif. Experiment with that if you like. Go on, we'll wait.
Back? ok? now, as you can see, as the sections get deeper, the amount of spaces builds up, on top of each other, giving the illusion of depth in our menu. I put this example in a div, so that you can easily style it with some css.
Expanding on this concept...
If you create some more blockifs, around the dash for example, i'ts also possible to change it, as the depth changes. You might want a bullet character in there (html: • ) and use dashes as the depth changes. Give it a go with what you've learned.
Section pictures! In most catalogs, the major sections have pictures. There is no reason why you can't have tiny versions of these images appear, if you use a blockif to ensure they only appear for the depth of 1.
You can do other things with this technique, such as put a couple of line breaks when the root sections are displayed, and then only display the secondary sections. Have a play.
Nesting them (not faking it)
Note: this technique was not invented by myself, I merely reference it here for your example.
http://community.actinic.com/showthread.php?t=33498
^ it can be found here. Credit where credit is due.
Though some of this structure is beyond the scope of this tutorial, we can talk about some of it and some interesting concepts it uses.
First of all, it is a 'loop through all sections' idea. This solution differs, because it places the correct markup to create nested lists, using blockifs. By detecting if the previous, or the next section name has any content, it can build a nested list. This can be styled with some code found in previous block tutorials. Unique to this example also, is the ability to detect and show the current section. I t does this by comparing the section ID, discussed earlier.
OK, whats next?
Well, if you're like me, you'll want some other obscene tricks. In the next set of tutorials, I'll be going over using custom variables for some interesting and useful effects.
With thanks to Gabriel Crowe of Interact Studio
Here, we'll discover some black magic secrets to get some snazzy structures out of your navigations. Please note that some examples here are from the Advanced User Guide and other places on the Actinic Community. This is simply so that I don't have to re-write already working code. Credit, where credit is due.
In the last tutorial I gave some structures that we'll be working on. Some lists, some dropdowns and some breadcrumbs. Now we'll step it up a notch. Get your crash helmet on.
Lets get some sub sections in there
Until now, we've dealt with a simple set of items from a simple list. With our products, we used conditions to decide what items should go into our list (block), and this is also very possible with our navigation. We can use the variables provided to build nested lists. There are a couple of ways to go about this and some compound methods, but basically:
Faking it:
We can take the items and based on the amount of depth in the section tree, we can introduce fake spaces, and other tricks, to make the list look like its nested. In reality, its actually one list, with a simple structure. Lets look at an example.
HTML Code:
<div> <actinic:block type="EntireSectionList"> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3c%3d%202" > <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%201" > </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%202" > </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%203" > </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%204" > </actinic:block> - <a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a><br> </actinic:block> </actinic:block> </div>
First of all, the initial block tells Actinic to loop through the entire list of sections. Every single one in the catalog, regardless of the depth.
Next block, tells Actinic to only write out its contents, when the section depth is 2 or less. Making a fake list, 2 items deep.
There are sets of blocks next all in a row. These decide if a couple of spaces are used. These 'if' blocks only trigger if a depth is equal to or less than a certain number. My example assumes that your shop goes 4 sections deep. You might think that it's pointless to do this, when we have blocked every section below 2 deep anyhow, but I have left them in there, so that it's very easy to expand that 3rd or even the fourth section with a simple change to the outer blockif. Experiment with that if you like. Go on, we'll wait.
Back? ok? now, as you can see, as the sections get deeper, the amount of spaces builds up, on top of each other, giving the illusion of depth in our menu. I put this example in a div, so that you can easily style it with some css.
Expanding on this concept...
If you create some more blockifs, around the dash for example, i'ts also possible to change it, as the depth changes. You might want a bullet character in there (html: • ) and use dashes as the depth changes. Give it a go with what you've learned.
Section pictures! In most catalogs, the major sections have pictures. There is no reason why you can't have tiny versions of these images appear, if you use a blockif to ensure they only appear for the depth of 1.
You can do other things with this technique, such as put a couple of line breaks when the root sections are displayed, and then only display the secondary sections. Have a play.
Nesting them (not faking it)
Note: this technique was not invented by myself, I merely reference it here for your example.
http://community.actinic.com/showthread.php?t=33498
^ it can be found here. Credit where credit is due.
HTML Code:
<ul class="sectionListSide"> <actinic:block type="EntireSectionList"> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%21%3d%20%22%22%29"></li></actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNamePrev%22%20%2f%3e%20%3d%3d%20%22%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29" ><ul></actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3c%3d%20%202" > <li<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionID%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22MainSection%3a%3aSectionID%22%20%2f%3e%20%20AND%20%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%3d%20%202" > class="currentPage"</actinic:block>><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionNameNext%22%20%2f%3e%20%3d%3d%20%22%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%202%29" ></li></ul></actinic:block> </actinic:block> </ul>
First of all, it is a 'loop through all sections' idea. This solution differs, because it places the correct markup to create nested lists, using blockifs. By detecting if the previous, or the next section name has any content, it can build a nested list. This can be styled with some code found in previous block tutorials. Unique to this example also, is the ability to detect and show the current section. I t does this by comparing the section ID, discussed earlier.
HTML Code:
<actinic:variable name="SectionID" /> == <actinic:variable name="MainSection::SectionID" />
Well, if you're like me, you'll want some other obscene tricks. In the next set of tutorials, I'll be going over using custom variables for some interesting and useful effects.
With thanks to Gabriel Crowe of Interact Studio