Pro-Guide:Nav-Mngr
From PageLime Documentation
(Ported from our Nav Manager announcement blog post)
What is the Navigation Manager?
The Navigation Manager is a bit more involved than simply putting a CSS class on a DIV tag. First, you must use an include file for your navigation, so that it is shared across your entire site. In the future, we will probably do away with this requirement, but for the time being, it’s the simplest way to ensure it gets updated on all of your pages.
Setting up the Nav Manager
Once your navigation file is set-up in an include, you must wrap your navigation HTML code in an element that has the CSS class “cms-navigation”. This is how PageLime knows where to publish updated navigation code. For example:
<div id="top_nav" class="cms-navigation"><!-- navigation will come here --></div>
OK, with the above two steps complete, you now have to enable the “Navigation Manager” feature on the site features screen.
IMAGE 1
Once the feature is active, you will see a new site dashboard item: “Manage Navigation.” When you open it up for the first time, you will be prompted to configure your navigation settings. Here’s what you’re going to need to do:
- Tell PageLime where your navigation file is. (for example: /includes/header.php)
- Enter your navigation code into PageLime, so we know what format to use when publishing.
Step 2. might look a bit intimidating, but it’s actually super simple. In the code editor box, you can enter some pseudo-code that tells PageLime how to render your navigation. There should already be some sample code that you can use in there. When you hit publish, PageLime will take this code, and merge the navigation data into it, and then publish it into the DIV tagged “cms-navigation” in your navigation file.
The pseudo-code is based on the popular Apache Velocity template engine. You can read their user guide for an in-depth overview of everything you can do, but you really don’t need to do that. Take a look at the code below to learn some basics:
#foreach( $navItem in $navItems )
<div>
<a href="$navItem.URL" class="nav-link">$navItem.Title</a>
#if ($navItem.ChildNodes.Count > 0)
<div class="sub-nav">
#foreach( $subNavItem in $navItem.ChildNodes )
<div><a href="$subNavItem.URL" class="subnav-link">$subNavItem.Tile</a></div>
#end
</div>
#end
</div>
#end
The areas highlighted in bold are the pseudo code that renders the navigation data into the HTML. So let’s step through what’s going on:
- The first line basically says “for each navigation item in the group of root navigation items, render the following”
- Then, we have some HTML code, which has some special tokens that will get replaced, such as $navItem.URL and $navItem.Title
- Then we loop through all of the sub navigation items for the current $navItem and render the subnav.
OK, now you can save your settings and you’ll be taken back to the navigation manager. You can now start building out your navigation, and save your progress. Once you or your client are ready to push the changes out to your site, hit the publish button and you’re done!
IMG
Here are some additional things you can do:
- On the “navigation settings” screen you can lock the root nodes of the navigation, so that the primary navigation can only be edited by the administrator. For example, if you don’t want your clients to change anything but the sub-navigation, you can lock them on the settings screen. (Additionally, any sub-navigation node can individually be locked by editing it and checking the “lock this node”).
- You can re-order the nodes by dragging them by the globe icon and dropping them in the desired space.