Dave Burke - A New Global Site Menu for Gummy Bear

A New Global Site Menu for Gummy Bear

The final new feature for Gummy Bear v1.2 that I wanted to add is complete, a Global Site Menu! 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 the past we had to duplicate a complete HTML menu for each application. With a global site menu originating from the Sueetie Framework we configure the menu in one location and drop <SUEETIE:SiteMenu runat=”server” /> in the app master pages. The SueetieApplications Model takes care of the rest.

Before going further, here's a screenpic of the new Global Site Menu which you can experience live at Sueetie.com.

Sueetie Global Menu

I wanted to provide as much freedom in menu construction as possible, so the idea is to create an HTML menu as you would normally and store it in /menu.config. Each element contains an ID which is replaced with a “class=’current’” string based on a Configuration object stored in Sueetie.Config. That summarizes the Site Menu logic in a nutshell.

If you're looking for a two tiered menu-submenu structure, the Site Menu doesn't support that (at least I don’t think it does.) Once I have a client site that requires two-tiered navigation I'll be adding that logic. It shouldn’t require much tweaking.

So here is the broad-stroke logic for the Sueetie Global Site Menu Control. Menu.config houses the HTML. The opening lines of the menu.config at Sueetie.com looks like this.

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

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

You can see this in two instances at Sueetie.com, with the Contact Us page (which is in the Sueetie News blog) and “Get Sueetie” which is located in the wiki. The maskurl on the app’s tab enables us to highlight the designated page tab only.

I created the Global Site Menu just this afternoon. You may find its approach to menu construction a bit weird at first, but hopefully you’ll get it quickly enough and appreciate the freedom it gives you. It’s a Version 1.0 Control, so it supports only one Role test, for example. That’s easy enough to remedy in Gummy Bear 1.3, but being able to add a “role=’Registered’” and know that for the first time a menu tab will be hidden to anonymous users is very cool beans indeed.

Yessir, I love that we can now drop in a <SUEETIE:SiteMenu /> control across the site and forget about it. Forever. One less thing.