This page describes the Global Site Menu Control
The Basic Construction of the Sueetie Global Site Menu Control
The Sueetie Global Site Menu Control is a single site-wide navigation menu released in Gummy Bear v1.2 which replaces the application-specific SiteMenu.ascx controls, each a duplicate of all others with a single change of manually designating the current menu tab.
The Global Site Menu is made possible by the
SueetieApplications Model, allowing us to control page processing based on current application type, application key and so forth. In this case we use the SueetieApplications architecture to determine which menu tab to highlight based on current location and additional properties we supply.
The logic behind the Global Site Menu is that you create a single HTML menu as normally and save it in /menu.config. The menu differs from typical HTML only by the fact that each tab has it's own "ID" property. We then list those Menu tab IDs in our /sueetie.config file with additional properties. The Site Menu Control loads the menu.config HTML and traverses through the sueetie.config IDs, displaying, hiding and highlighting each menu tab accordingly.
A Working Example
You have a working /menu.config and accompanying Tab IDs listed in your /sueetie.config, but we'll use the Sueetie.com menu because it uses more properties.
Here is the opening of the Sueetie.com Site Menu HTML in the /menu.config file.
<div class="menulinks">
<ul id="nav">
<li id="GetSueetieTab">
<a href="/wiki/GetSueetie.ashx">Get Sueetie</a>
</li>
<li id="BlogTab">
<a href="#">Blogs</a>
<ul class="subnav">
<li id="BlogTabNews">
<a href="/blog">Sueetie News</a>
</li>
<li id="BlogTabBusiness">
<a href="/business">The Business of Community</a>
</li>
</ul>
</li>
Notice that each menu item has a corresponding ID xml element in Sueetie.Config. Here’s the beginning of the Sueetie.com XML that handles the above HTML.
<Menu>
<Tabs>
<Tab id="GetSueetieTab" url="/wiki/GetSueetie.ashx" />
<Tab id="MarketplaceTab" app="marketplace"/>
<Tab id="BlogTab" app="blog" maskurl="/blog/contact.aspx" />
<Tab id="BlogTabNews" appkey="blog"/>
<Tab id="BlogTabBusiness" appkey="business" />
Do you see the correlation between the menu HTML and the Sueetie.Config Tabs object? When the menu.config is processed in the SiteMenu control the Tabs list is traversed and processes each ID element in menu.config to determine which item or items are given the “Class=’current’” attribute or are visible based on the Current User’s Roles.
The properties that determine visibility and current selection are URL, APP, APPKEY and ROLE. You’ll notice a “MASKURL” property above for the “BlogTab” element. That enables the selection of an individual page menu item inside another menu application without also marking the application menu as highlighted.
Tab ID Properties
The Tab Properties are URL, APP, APPKEY, MASKURL and ROLE. Let's look at each.
- url = Highlight only on designated url. This can be used with maskurl. Sueetie.com tabs using the url property are the "Get Sueetie" and "Contact Us" tabs.
- app = highlight on application. Example: the "blog" tab would highlight for all blogs, as it does at Sueetie.com for both the Sueetie News and Business of Community blogs
- appkey = highlight only for designated application by ApplicationKey. For example, if both the Sueetie News and Business of Community blogs were on the main tab, Sueetie News would light for appkey="blog" and Business of Community tab for appkey="business."
- role = tab will display only when member is designated role. For example, on Sueetie.com (and Gummy Bear) is a Control Panel tab which only displays for site administrators because it has a role="SueetieAdministrator" assignment.
- maskurl = prevents two tabs lighting when url property is used and that page is in another menu application. The maskurl property is typically assigned to the application to indicate that the url MASKS normal highlighting of that application tab. For instance, the Sueetie.com Get Sueetie link is a page in the wiki at /wiki/GetSueetie.ashx. To prevent normal processing of highlighting the Wiki tab (thus lighting 2 tabs, which is not what we want), adding maskurl="/wiki/GetSueetie.ashx" to the Wiki tab instructs the Site Menu control that it is not lit when a user is on the Get Sueetie page.
HighlightTab Property
You can also specify a highlighted tab in a web or master page using the HighlightTab property as shown here.
Current Limitations
Display
The Global Site Menu currently supports a single row display of menu tabs and drop-down menus as shown here at Sueetie.com. If you need a two-tiered menu where the submenu displays only on selection of a primary main tab, then you'll have to roll your own until Gummy v1.3. The initial goal of the Global Site Menu was to eliminate the need for creating and maintaining individual navigations for each site application.
Properties
The initial release of the Global Site Menu in Gummy 1.2 supports only a
single maskurl property. This means that you can not display more than one featured page in any application. At Sueetie.com we could not spotlight a second wiki page for instance without lighting the wiki tab in addition to the second featured page.
Only a
single role property can be used. For instance, the Control Panel tab requires membership in SueetieAdministrator for it to be visible. Future versions will mostly like extend this property to test multiple roles.