freebie: popout section aware nav.

[gabrielcrowe]

Synopsis:
This script creates a navigation structure, that is context (section) aware, that is very configurable. My hope is that it will speed up shops with massive amounts of sections, and the loading times online, by using only the required html to build menus.

Example Output 1:

<ul class="ul1">
<li class="li1_selected"><a href="x.html" class="link1">x</a>
	<ul class="ul2">
	<li class="li2_selected"><a href="1.html" class="link2">1</a>
	<li class="li2"><a href="2.html" class="link2">2</a>
	</ul>
</li>
<li class="li1"><a href="y.html" class="link1">y</a></li>
<li class="li1"><a href="z.html" class="link1">z</a></li>
</ul>

(example assumes that the user is on a page called '1.html')

<ul class="ul1">
<li class="li1"><a href="x.html" class="link1">x</a>
	<ul class="ul2">
	<li class="li2"><a href="1.html" class="link2">1</a>
	<li class="li2"><a href="2.html" class="link2">2</a>
	</ul>
</li>
<li class="li1_selected"><a href="y.html" class="link1">y</a>
	<ul class="ul2">
	<li class="li2_selected"><a href="3.html" class="link2">3</a>
	<li class="li2"><a href="4.html" class="link2">4</a>
	</ul>
</li>
<li class="li1"><a href="z.html" class="link1">z</a>
	<ul class="ul2">
	<li class="li2"><a href="5.html" class="link2">5</a>
	<li class="li2"><a href="6.html" class="link2">6</a>
	</ul>
</li>
</ul>

(example assumes that the user is on a page called '3.html')

Notice the extra '_selected' css styles, around areas that are selected, and areas upstream are also marked as selected.

Prerequisites:
You'll need version 8, or 9 of actinic. I was using 8.5.1. HFUA to build this code. You're mileage may vary on older versions. It will NOT work on v7 or lower.

Features Overview:
This menu is php based and bypasses the standard Actnic blocks and loops. It's faster in some cases, when compared to default structures.

This menu requires a starting section. for most cases you'll want to use the root section, '0'. It can also be configured to as many sections deep as you require, usually, 2 is sufficient. You can also instruct the menu to force open all its trees, or even only display the sections that are required, based on the current location in the catalog. This is the setting that most people should use.

Trying it out:
TEST IT FIRST. BACK UP YOUR SHOP.

Here is a little more help with how the individual calls work, for those that want to get technical. Link.

And finally...
So, if anyone could give this a go, I'd be grateful. Some errors, enhancements or feedback please! I need to know if this causes any odd behavior in Actinic, after you have installed and got this working.

Changelog
- Updated this Navigation to support Hidden sections
- added some clever blocks to fix actinic errors
- added some css to make it look pretty.
- fixed a bug in currently selected css
- updated the code to an archive and moved it to a manageable place.

Download and Install
You can get the download, with instructions, here.

[fergusw]

Hi Gabriel,

Looks good so far at first glance.
Just popped it onto test site and uploaded - no problems.

Perhaps showing an alternate way to style the "active" section/sub-section differently would be useful. Allow an easy way to change the display of the open section node.

Not tested snapshing or any extended functionaliry yet though

[gabrielcrowe]

Perhaps showing an alternate way to style the "active" section/sub-section differently would be useful. Allow an easy way to change the display of the open section node.

Great idea, i'll work on that next.

[Darren B]

Works like a dream gabe, im pressed to say the least, it seems faster aswell.

Unfortunatel a new section added means a whole site upload, but thats no different to what we currently have, its im pressive though.

Minor moan, actinic not gabe, i wish i could turn these bloody coding errors of as it stops uploads, stupid stupid idea

D

[fergusw]

Great idea, i'll work on that next.

p'rhaps some optional parameters or something for defining the 2nd level styles if desired?

Somthing like that?

[Darren B]

OK weeeeee problem

The whole menu disappears when you go to the check out, still doing a little investigating will let you know what i find

D

[Darren B]

Hmmm get better

right i have no menu on the main index page, but its works on the catalogue pages and not the check out ? jees too late to get my head around this, but i am now back to the collapso menu for the main index, gabes little tweak for the catalogue and nothing for the checkout

D

[gabrielcrowe]

For your index page, you can do this:

<actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block>

The reason that it fails, is becasue the variable SectionID is required to tell the navigation where it is in relation to the catalog. This is missing on the index page, and therefore the menu will not render. putting '0', will think the menu is located in your acatalog index and it will render appropriately. i'v also set the depth to 1 and 'dont render trees'.

To get all your second level to render in the front page, do this:

<actinic:block php="true" > MakeNav(0,2,1,0); </actinic:block>

this should fix the cart as well?

[gabrielcrowe]

p'rhaps some optional parameters or something for defining the 2nd level styles if desired?

Somthing like that?

This is part of the code allready. View the source on your tree, they have styles like:

ul1, ul2, ul3 etc.

li1, li2, li3, etc.

but you're right about active sections, that should be working from the code given and i cant figure out why.

edit: i have made a minor tweak that will allow the li1_selected, li2_selected to be used to make some css changes to the relevant sections. This might help until a better solution presents itself.

[ki450751]

Thanks for your help. Does the code work without hitches now? I am reluctant to be a guinea pig as I am not a developer.

[gabrielcrowe]

Thanks for your help. Does the code work without hitches now? I am reluctant to be a guinea pig as I am not a developer.

www.basketballasylum.co.uk has been running this code for some time now.

no problems, much faster site now.

so does: www.uktactical.com

BACK UP your catalog before you test. you've got nothing to loose.

[gabrielcrowe]

After some people had problems making this work due to error it generates, I hashed this together:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Brochure%27" > <actinic:block php="true" > MakeNav(0,2,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27" > </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%201%27" > </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" > </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27" > <actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Add%20To%20Cart%20Confirmation%27" > <actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Receipt%27" > </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Search%27" > <actinic:block php="true" > MakeNav(0,2,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Search%20Results%27" > <actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Bounce%20Page%27" > <actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Site%20Map%27" >	<actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Terms%20And%20Conditions%27" >	<actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Section%27">
		<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
			<actinic:block php="true" > MakeNav(0,2,0,<actinic:variable name="SectionID" />); </actinic:block>
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%200" >
			<actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block>
		</actinic:block>
</actinic:block>

What is it?

its a set of blocks that allow the navigation to be inserted into the brochure pages, or the catalog, without generating any 'SectionID out of context' errors.

the blocks (if you take a peek at them) allow you to configure the way that the nav behaves, on pages such as the sitemap, and in searches.

overall a powerful addition. The original Block if idea came from a post by jan i think. thanks jan.

[gabrielcrowe]

..and here is some css, to make it look slightly presentable:

/* php nav */
.navcontainerment {
	font-size: 12px;
}
.navcontainerment a{
	color: #555;
	text-decoration: none;
}
.navcontainerment ul{
	list-style-type: none;
	padding: 0px;
}

.ul1 {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
.li1 {
	background-color: #eee;
	padding: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	font-weight: normal;
}
.ul2 {
	font-size: 11px;
	margin: 3px 0px;
	padding: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}
.li2 {
	background-color: #aaa;
	padding: 3px 0px 3px 8px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}
.li2 a {
 color:#222;
}

Assuming use, thus:

<div class="navcontainerment">
<actinic:block php="true" > MakeNav(0,1,0,0); </actinic:block>
</div>

...and this css looks a litttle bit like this:

[pinbrook]

The original Block if idea came from a post by jan i think. thanks jan.

Sure it wasn't me?

or are you another one who doesn't know their jo from jan

[gabrielcrowe]

Sure it wasn't me?

or are you another one who doesn't know their jo from jan

<chimneysweep>thats not the case m'aam. its my memory, s'all. its like a barrel of goldfish.</chimneysweep>