By default the autonav block lists website pages and external links should you want to use these.
Occasionally though you might want your menu item just to be a category heading, a placeholder in the menu as it were.
e.g – what we would normally do in an Unordered List would be to set the <li>
of the relevant item to “javascript:void(0)” so the page does not change but the menu opens up.
we want our unordered list to look something like this:
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”javascript:void(0)” >Main Category</a>
<ul>
<li><a href=”javascript:void(0)”>Sub Category 1</a>
<ul>
<li><a href=”/page1/” >Page 1</a></li>
<li><a href=”/page2/” >Page 2</a></li>
<li><a href=”/page3/” >Page 3</a></li>
<li><a href=”/page4/” >Page 4</a></li>
<li><a href=”/page5/” >Page 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”/privacy-policy/” >Privacy Policy</a></li>
<li><a href=”/about-us/” >About Us</a></li>
</ul>
In the above menu both Main Category and Sub Category are just placeholders, when clicked they do not open a new page but they do open a sublevel on the menu (of course they need to be combined with javascript and/or css to achieve this).
There is no default way to do this in Concrete5 but that isn’t a problem as it is easy to ‘tweak’ the autonav so it will handle this.
First we need to add a new page attribute (attributes are a really cool feature of Concrete5 and make for easy extension of core objects).
The way to do this is to log into the admin end of your C5 site, go to the section ‘Pages and Themes’ and click on the ‘Attributes’ tag.
We add a new page attribute of type checkbox.
We make sure that the handle is called placeholder and click add attribute. We’ve now added a custom attribute which C5 has internally associated with the page object.
So we now have an attribute we can check against – if we apply this ‘placeholder’ attribute to a page then we have a flag we can use to tell the system to do something when it exists.
Next we need to add one line of code to the auto-nav block to check if the flag is set and then do something if it is:
we never edit the core concrete5 files so we need to copy:
public_html/concrete/blocks/autonav/view.php to public_html/blocks/autonav/view.php (you’ll need to create the autonav directory under blocks if this is your first customisation).
We then edit our copy as follows:
look for the line:
if (!$pageLink) {
$pageLink = $ni->getURL();
}
under this add:
if ($_c->getCollectionAttributeValue(‘placeholder’)) {
$pageLink=”javascript:void(0)”;
}
that’s all we need to do, if you look at the rest of the code in the file you can see that we are just using the already instantiated $_c object which neatly contains the attribute collection for pages. We just check if the attribute exists for the current page (we just tapped into the loop already in the code) and alter the url for our purposes.
The last thing to do is to add our custom attribute to the pages we want to use as placeholders:
So, it’s back to the C5 backend of our website and into the sitemap.
Select the page that we want as a placeholder. Go to the custom attributes tab. Select our custom attribute ‘placeholder’ from the dropdown list….
Check the paceholder checkbox when the page refreshes and click ‘Save’.
Job done – the page link will be our javascript:void(0) link so the page will not change but the submenu can be opened.