This document describes the different techniques for managing site menus in the ExSite CMS.
Using a small web application to auto-generate your menus makes it very easy to:
Your page menus automatically adjust to include this new information as soon as you do anything to alter the menu structure. (You will have to republish static pages, in most cases.) Automatic menu builders can also add extra menu links; the standard ones include a "Logout" link if the user is currently logged in.
Auto-generated menus include CSS class attributes so that you can apply style rules to the generated HTML. The best place to put your CSS rules is in your main stylesheet in the site template. (Note that this stylesheet will usually have to be published before it gets picked up by the menu generator.)
To change the position of a page in the menus or site map, you can change the parent page (to move it to different a submenu or to/from the top-level menu), or the page rank (to move it around within a particular menu).
ExSite comes bundled with two web applications to auto-generate site menus:
To insert a menu into a page, place the appropriate CMS tag into the appropriate position in your template's HTML, for instance:
<!--&SimpleMenu()-->
<!--&DMenu()-->
The menu tag will automatically expand into a complete site menu, when a real page is viewed.
Use one of the following CMS tags:
<!--&SimpleMenu(horizontal)--> <!--&SimpleMenu(horizontal,submenu)-->
The first will display the top-level menu; the second displays the submenu of the current page if it exists, or the menu that the current page belongs to, if not.
By default, the links are spaced with a snippet of separator HTML that is defined in the SimpleMenu config file, which defaults to this:
&nbsp;|&nbsp;
The default menu presentation is therefore something like this:
About | Products | Support | Links | Contact Us
The entire menu is wrapped in a <span class="hmenu">...</span>, and the individual links are of class "menu". If you want to take advantage of these CSS classes, you must make reference to them in your site stylesheets. SimpleMenu
only generates the links; your graphic design is responsible for styling them.
If you want to wrap your menu links in some other HTML for more sophisticated presentation, you can define three content objects to provide these HTML snippets:
The best place to place these content objects is usually in the template. From the template view in the Website Manager click, Template > New Content Item. Give the content item one of the above names, and set its type to design. Switch to plain text mode, and enter the HTML snippet for this content object. Repeat this procedure for each of the three content objects named above.
Here's some sample CSS:
table.hmenu {
border-collapse:collapse;
width:100%
}
.hmenu {
border:1px solid #006;
background-color: #99c;
text-align:center;
padding:0px;
}
.hmenu a {
background-color:#99c;
color:#336;
display:block;
width:100%;
text-decoration:none;
padding:4px;
font-weight:bold;
}
.hmenu a:hover {
background-color:#336;
color:white;
}
And here is some sample HTML snippets for formatting:
<!-- SimpleMenuTopH --><table cellspacing="0" cellpadding="0" class="hmenu"> <tr>
<td class="hmenu">
<!-- SimpleMenuMidH --></td> <td class="hmenu">
<!-- SimpleMenuBotH --></td>
</tr> </table>
Here is what the example menu above will look like with these enhancements:
Use the following CMS tag:
<!--&DMenu()-->
DMenu always displays the top-level menu in the menubar. Submenus appear as DHTML drop-down menus underneath each of the top-level links. DMenu only displays the first level of submenus.
The DMenu menubar is output as a table of width 100%. (Enclose DMenu in a wrapper element of restricted width if you want to control the width of the menubar.) Each link is enclosed in its own table cell, and each cell is equal width. The menubar table, cells, and links are all of CSS class menubar.
The DMenu drop-down menus are enclosed in tables of class DMenu. These drop-downs are typically the same width as the menubar cell from which they originated.
Together, the HTML for the a menubar and drop-downs looks like this:
<!-- MENUBAR --><table width='100%' cellspacing='0' cellpadding='0' class='menubar'><tr> <td class='menubar' width='16%'><a class='menubar' href='#'>Home</a></td> <td class='menubar' width='16%'><a class='menubar' href='#'>About</a></td>
<td class='menubar' width='16%'> <div id='menu2' onmouseover=Menu(2)> <a class='menubar' href='#'>Products</a> </div> </td> <td class='menubar' width='16%'><a class='menubar' href='#'>Support</a></td>
<td class='menubar' width='16%'><a class='menubar' href='#'>Links</a></td> <td class='menubar' width='16%'><a class='menubar' href='#'>Contact Us</td> </td></tr></tr></table> <div id='areaTag' class='clsCBE' style='display:none'></div>
<!-- ONE DROP-DOWN MENU (under Products) -->
<div id='box2' class='DMenu'> <table width='100%' cellspacing='0' cellpadding='0' border='0'><tr><td> <a class='menu' href='#'>Widgets</a> <a class='menu' href='#'>Gadgets</a>
<a class='menu' href='#'>Grommets</a> <a class='menu' href='#'>Knick-knacks</a> </td></tr></table> </div>
<!-- ADDITIONAL DROP-DOWN MENUS HERE... -->
DMenu will also insert Javascript to manage the drop-downs, and some core CSS rules that are needed to format the drop-downs correctly.
The menus can be styled using CSS settings for table.menubar, td.menubar, a.menubar, div.DMenu, and a.menu. CSS settings are automatically inserted to hide the drop-down menus until they need to become visible.
Use one of the following CMS tags:
<!--&SimpleMenu()--> <!--&SimpleMenu(vertical)--> <!--&SimpleMenu(vertical,submenu)-->
The first two are equivalent (the "vertical" parameter is the default), and will display a menu starting from the top-level pages. The last form displays a menu starting from the submenu of the current page, or if there isn't one, the submenu that the current page belongs to.
By default, the links are spaced with a snippet of separator HTML that is defined in the SimpleMenu config file, which defaults to this:
<br>
The default menu presentation is therefore something like this:
Home
About
Products
Support
Links
Contact Us
The entire menu is wrapped in a <span class="vmenu">...</span>, and the individual links are of class "menu".
If you want to wrap your menu links in some other HTML for more sophisticated presentation, you can define three content objects to provide these HTML snippets:
The best place to place these content objects is usually in the template. From the template view in the Website Manager click, Template > New Content Item. Give the content item one of the above names, and set its type to design. Switch to plain text mode, and enter the HTML snippet for this content object. Repeat this procedure for each of the three content objects named above.
Here's some sample CSS (included in your main template stylesheet, for instance):
td.menu {
padding:0px;
}
a.menu {
background-color:#99c;
color:#336;
display:block;
width:100%;
text-decoration:none;
padding:4px;
font-weight:bold;
}
a.submenu {
background-color:#99c;
color:#336;
display:block;
width:100%;
text-decoration:none;
padding:2px;
font-size:9pt;
font-weight:normal;
}
a.menu:hover,a.submenu:hover {
background-color:#336;
color:white;
}
And here is some sample HTML snippets for formatting:
<!-- SimpleMenuTop --><table width="160" border="0" cellspacing="1" cellpadding="0"> <tr><td class="menu">
<!-- SimpleMenuMid --></td></tr> <tr><td class="menu">
<!-- SimpleMenuBot --></td></tr>
</table>
Here is what the example menu above will look like with these enhancements (roll your mouse over the links). This view shows an exploded submenu, which would only be shown if you were currently viewing one of the Products pages.
| Home |
| About |
| Products · Widgets · Gadgets · Grommets · Knick-knacks |
| Support |
| Links |
| Contact Us |
<!--&SimpleMenu(path)-->
This menu creates a path, or "cookie-crumb" menu showing your location in the site. For example:
The entire menu is wrapped in a <span class="pmenu">...</span>, and the individual links are of class "menu". Beyond those basic CSS classes, there are not many options for redecorating the menu.
<!--&SimpleMenu(sitemap)-->
This creates a complete listing of all of your web pages, in a single nested list of submenus. For example:
The entire menu is wrapped in a <ul class="sitemap">...</span>, and the individual links are of class "menu". Beyond those basic CSS classes, there are not many options for redecorating the menu.
ExSite allows you to maintain "alternate versions" of any page on a site. A typical application is to maintain some or all of the site's pages in different languages.
If your website's default language is English, say, but you are currenlty on a French version of a particular page, then ExSite will automatically attempt to build French menus, to maintain your language context. It does this as follows:
If your translations are fairly complete, then when you switch to a French version of one of your pages, you will stay in the French versions when navigating through the menus. If your translations are imcomplete, then you will occasionally have to fall back into the English version where no French version can be found.
The SimpleMenu and DMenu menu plug-ins are good examples of menu-generating plug-ins. They can easily be cloned and modified to customize their menu-generating logic, if you have Perl programming experience.
Both of these plug-ins use ExSite's built-in site-mapping functionality to build a complete model of the site's web pages and their relationships. A menuing plug-in that wishes to make use of ExSite's built-in logic for tracking page relationships, page ordering, hidden pages, multilingual pages, and so on, will want to use these tools.
To map a site for the purpose of generating menus and submenus:
my $site = new ExSite::Section(id=>$site_id); my $map = $site->get_mapped_pages(0,$version); # $version is optional
To obtain an array of pages representing the top-level menu:
my @page = $map->get_topnodes_data();
To obtain an array of pages representing a submenu beneath a particular page:
my @submenu_page = $map->get_child_data($page[0]);
The arrays contain page datahashes. That is, each element of the array is a hash of attributes=>values corresponding to that page. This is how to convert a page datahash into a
Page object:
my $page_object = new ExSite::Page(page=>$page_datahash);
To convert an array of page datahashes to an array of HTML links, follow this template code:
my @links;
foreach my $page (@page) {
my $p = new ExSite::Page(page=>$page);
my $label = $p->get("page","label");
my $url = $p->get_url();
push @links, "<a href=\"$url\">$label</a>";
}
Lastly, assemble these links into whatever HTML layout is appropriate for your site.
Hard-coding your menus means that you write your own menu HTML and build it right in to your template. The advantages of doing this are:
The disadvantages are:
If menus must be coded numerous times due to changing appearance or inclusion of contextual links on certain pages, this will make for a LOT of extra work. In any case, it will probably be advantageous to separate the menu HTML into its own content object (or multiple content objects, if the structure is more complex) that can be maintained separately from the page's core HTML.
When manually coding links to other pages, try to use the CMS page-url notation, eg.
<a href="{{faq.html}}">Frequently Asked Questions</a>
This will save you the work of re-coding your links if the page switches between static/dynamic (or public/members-only) presentation.