This page describes the Global Site Menu Control
Sueetie Global Site Menu Control Design
The Sueetie Global Site Menu Control is a single site-wide navigation menu made possible by the
SueetieApplications Model. This allows us to determine page properties of application type, application key and so forth.
The logic behind the Global Site Menu is that you create a single HTML menu as normally and save it in
/themes/THEME/config/menu.config. Each tab has it's own "ID" property. We then list corresponding tab IDs in our /sueetie.config file with additional display properties.
Please note: If you aren't using context-aware menutab styles that light-up or turn-off and simply want to quickly customize the site menu, changing the HTML in /themes/THEME/config/menu.config is all that is required. A Working Example
We'll be working with
/themes/THEME/config/menu.config and accompanying Tab IDs listed in your /sueetie.config.
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.