LoginRegisterCommercial SupportContact Us


Development & IT > Menus

Menus

posted on 11:13 AM, July 16, 2010

ExSite Manual - Menus

This document describes the different techniques for managing site menus in the ExSite CMS.

Contents

Dynamic Context-sensitive Menus

Using a small web application to auto-generate your menus makes it very easy to:

  • add new pages to the site
  • remove pages from the site
  • move pages around to new positions in the site
  • change menu labels or page file names

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.)

Automatic menuing concepts:

Parent pages
Pages are organized hierarchically in a site. Each page nests underneath a parent page, and can be treated like a subtopic or subsection of the parent page. Pages can be nested in this way to any depth.
Top-level pages
Top-level pages are those pages that have no parent. These are considered to be your site's primary pages. The top-level menu of the site consists of the top-level pages.
Submenus
A submenu is a set of pages who have the same parent. Those pages will make up a submenu that reside underneath a particular page.

Page rank
Each page in a top-level menu or submenu has a rank, which is just a number that determines the page's order in the menu with respect to other pages. A page of rank 4 will be placed below pages of rank 3, and above pages of rank 5. It will have no specific order with respect to other pages of rank 4.
Page visibility
Pages can be visible or hidden. Visible pages appear in auto-generated menus, whereas hidden pages do not. If you want to have a link to a hidden page, you must insert it manually somewhere in your site content.
Page Label
The page's "label" is the string that will be used to identify the page in menus. It is not necessarily the same as the page title, although it may default to that at first. It is a good idea to keep the label very concise, since there isn't much room in menus, but keep the title more descriptive, which is better for search engines.
Site Map
A site map is just a list of all your pages, organized hierarchically in their appropriate submenus.

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:

SimpleMenu
Creates regular HTML menus in a variety of formats, with numerous options for making them pretty.
DMenu
Creates DHTML drop-down menus from a horizontal menu bar.

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.

Horizontal Menu Bars using SimpleMenu

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:

Home | 

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:

SimpleMenuTopH
This content will be placed at the beginning of the menu, before any links.
SimpleMenuMidH
This content will be placed between each link of the menu. (This replaces the default "&nbsp;|&nbsp;" separator.)

SimpleMenuBotH
This content will be placed at the end of the menu, after all links.

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.

Example

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:

Horizontal Menu Bars using DMenu

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.

Vertical Menus

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:

SimpleMenuTop
This content will be placed at the beginning of the menu, before any links.
SimpleMenuMid
This content will be placed between each link of the menu. (This replaces the default "<br>" separator.)
SimpleMenuBot

This content will be placed at the end of the menu, after all links.

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.

Example

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.

Other Menu Types

Path menus

<!--&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.

Site Maps

<!--&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.

Multilingual Menus

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:

  1. If any of the pages that show up in the menus also have a French version, use the French version instead of the English.
  2. If a page in the menus does not have a French version, then fall back on the default (English) version instead.

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.

Custom Menu Generators (for web developers)

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-coded Menus

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:

  • more control over menu presentation
  • may be simpler for small menus (and faster, for dynamic page views)
  • can be easier to include menu links to external sites or non-pages in your menus

The disadvantages are:

  • more work to maintain if your site changes regularly
  • menus must be manually updated when links change
  • menus must be re-coded multiple times if their appearance changes between pages, or they are meant to be context-sensitive
  • greater risk of typos, broken links, or other navigation problems

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.

Filed under: graphic design