Today, we’re releasing a new premium account feature: the Navigation Manager. Here’s how it works in one sentence: you tell PageLime where your navigation file is, you put the css class “cms-navigation” on the element that contains your navigation, and PageLime publishes your updated navigation code into the file. Keep reading for an in-depth tutorial.
Managing navigation with PageLime has always been a super simple task: put some “cms-editable” tags on links, make the navigation file a server side include, and publish away. For most sites this works great. But what about sites with deep hierarchical menus? Well, it still works but now you’ve got a lot of bubbles on the screen. We’ve published some thoughts on this before in this post, and this is one of the reasons we’ve developed 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.
Once your navigation file 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.
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!
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.
Hope that was informative! As always, post questions and thoughts in the comments below or in the forum.
Tags: navigation
Freakin awesome! =D
pretty cool guys
How would it work with only html?? quite confused:S
please help!!!
Hi Chris – not sure I understand the question. Can you describe what you’re trying to do?
Excellent implementation guys, very easy to use.
I think that what Chris is saying is that most drop-down navigation menus use Javascript and/or CSS for the implementation (mine uses an external Javascript file)…but in this post I don’t see anything referring to these files, just HTML/PHP stuff.
Hi Scott,
The navigation code gets publish into your page into the div with the class “cms-navigation”
You can include JS, CSS, and anything else in your HEAD tag for the page just fine. You don’t need to put it into the code window on the navigation settings at all.
The concept here is that you have a server side include navigation file, where you tell PageLime to publish your nav code.
you guys are @#$$ing champs.
I’ve got to say. I’m more impressed and glad to be a customer every month. Whether my customers ever find out about any of these features, I don’t know. But this stuff is getting better every time I check the blog. Keep it up Pagelime!
Hi,
I use Dreamweaver to put my websites together and tend to create a navigation menu on an initial page and then turn it into a “Library item” so I can drop it onto further pages where it will auto update if I edit it at a later date – pretty much like a server include I guess just running locally. This library item is tucked away in a “Library” directory which is uploaded to clients web space along with all of the other web files.
Is Pagelime able to recognise these “library” items as includes and then alter the navigation through the “nav manager” accordingly?
Cheers
G
Hi Gary,
As long the nav item is an include you should be able to edit it via the includes feature or via the nav manager. If you’re still having trouble shoot an email over to support and we’ll help you figure it out.
Is this yet ready feature because navbar is working only in index.html where the navigation file path is…. but problem is that every single site I have navigation, so why there is not any option that I can choose every pages where is navigation… why I can choose only one path?
I think this is made for those who are using .css navigation, somehow?
HELP!
Feature is ready, you just have to use an include for your navigation. Email support and Tom will help you get set up. You essentially just have to move your navigation code into an include file, and then use an include statement (PHP example: < ?php include("navigation.php"); ?> and you should be good to go.
Can someone please give me an example of the code for another layer of sub-menu.
Main-Submenu-SubSubmenu
I tried the $navItem.ChildNodes.Childnodes, but that doesn’t work.
Anyway, it would be greatly appreciated.
Thanks
There are a number of posts in the forum that might help. If you’re still having trouble shoot us a support email.
Hi, amazing stuff…but I have got a question about.
I am trying to understand they way this should be set-up but it sounds a bit too complicated. It would be good if you could maybe clarify a couple of points (or even better add a video).
I don’t get what do you mean by “First, you must use an include file for your navigation, so that it is shared across your entire site ”
Thanks
Hi Antonio, an include file is a file that you “include” into other pages via a script statement. Check out this link for more info: http://www.albinoblacksheep.com/tutorial/include
Hi Emil,
Thank you for your reply. I was wondering if the same result could be achieved using something else then php scripts. My sites are in full html and so are my pages.
If I had to use the what you suggested, I would need to reset the extension of all of the pages I am currently using to be something.php. (If I have got it right, of course
)
Regards,
Antonio
Hello, I was wondering if anyone has come up with a good way to manage multiple nav’s For example, I’m using the Navigation Manager to manage the main site navigation but have not found a good way to manage a secondary set of navigation items in the site’s footer. I know it can be handled using an include but would like to give my client an easy way to manage it as well.
Looking at the velocity manual, there is a way to set variables if you need each nav item to have a specific ID:
#set( $nav = 0 )
#foreach( $navItem in $navItems )
#set( $nav = $nav + 1 )
Which would give you , , , etc….
What happens when I add a link? Will the ‘clone page’ box pop up?
I am interested in upgrading to a premium account for this feature. Are admin’s able to turn off the navigation editor for specific users? I just don’t want all users to have the ability to alter the navigation of their site.
thanks
Hm. You know I don’t think that you can give specific users permission to this feature.
I’d be willing to explore adding this. Give me a shout to support[at]pagelime.com and we can coordinate this.
Am I missing something? I can’t drag-and-drop the sub-menu times into root, and vice-versa… They seem to be stuck in their parent node and can only be sorted within. Any way to make this easier to restructure menus?
Also, can you please (pretty please) make the “Edit Navigation Item” (Title/URL/Lock/Done/Cancel thingie) float directly to the right of what you are editing. When you have a lot of pages it is really annoying to have to scroll all the way to the top of the page, edit, scroll all the way back to the bottom of the page, add, scroll all the way back to the top of the page, edit, ad infinitum.
Moderator, please disregard the posts above, they are not formatted properly to cut/paste. I am including a link to a file on my server that can be retrieved directly. You can either post this next message directly, or somehow put the plain ASCII version somewhere able to copy/paste into their Navigation File Code…
http://www.deenfoxx.com/pagelime/basic-navigation-file-code.txt
http://www.deenfoxx.com/pagelime/advanced-navigation-file-code.txt
http://www.deenfoxx.com/pagelime/php-navigation-file-code.txt
I have created some very helpful Velocity Code for full navigation generation.
I was unable to paste the code into the reply section such that you could copy/paste them, so I have uploaded them to my server for all to grab…
## BASIC ## –> http://qr.net/dfplb
This basic velocity code is minimal to get all navigation, regardless of how many levels.
It does not include any classing of html tags.
## ADVANCED ## –> http://qr.net/dfpla
This advanced code outputs nicely formatted navigation with classing on <LI> tags:
is_level_[level#] (also on <UL> tag), is_parent, of_[#of children], is_first_item, is_last_item
…and put in some unique ID’s, just in case: for <LI> tag: item_[id#], for <A> tag: link_[id#]
The formatting of the code had to become flat in order for the output formatting to be leveled.
## PHP ## –> http://qr.net/dfplp
Use this advanced velocity/php code to put all navigation into a flat php array to use later.
You can then include the navigation at the top of all your pages, and then just use PHP
to populate the menu(s) any way you like.
I have it automatically track the following: id, title, url, level, parent_id
At the far bottom of the code, I include extra PHP code (not Velocity) to accept additional parameters
on the end of the URL supplied in pagelime. NOT the URL query string parameters, that’s different.
To use the parameter feature, simply separate parameters with spaces at the end of the url,
and each key/value pair should be split as key=value.
Without a key=, it will assume it is part of the previous key.
Example:
URL on PageLime is:
http://url.com#anchor?query=value&other=params index.php my_param=”string $var” show=false url=more.html
Results in this array item in PHP:
Array
(
[1] => Array
(
[this_id] => 1
[title] => MEDICARE MENU
[url] => http://url.com#anchor?query=value&other=params
[level] => 1
[parent_id] => 0
[urls] => Array
(
[0] => http://url.com#anchor?query=value&other=params
[1] => index.php
[2] => more.html
)
[my_param] => “string $var”
[show] => false
)
You can also use the ROOT navigation (level=1) to split content into multiple menus (main, sub, side, etc.)
I am sure there are a few who will love this ability. But, it requires PHP!
## BONUS UBER-MEGA COMPRESSED BASIC VERSION ## –> 2-line version
#macro(g $m)<ul>#foreach($n in $m)<li><a href=$n.URL>$n.Title</a>
#if($n.ChildNodes.Count>0)#set($c=$n.ChildNodes)#g($c)#end</li>#end</ul>#end#g($navItems)
Should copy-paste fine, now that I got rid of the double-quotes (won’t pass validation, you can put them back in).
All the rest of the code above had to be in text files because they would not copy-paste!
I am sorry, I am absolute begginer. I put this code to file “menu.php”, but look, what happens: webyhned.cz/menu.php
Composing php files is not similar to composing html pages?