Boomtown Webworks - CityDesk Design Tips

CityDesk Design Tips

Highlighting the current menu item (with ASP)
By Carmen Carter

You can always tell where you are in the Boomtown Webworks website because the menu item for the current page is styled differently (see "Content Management" in the navigation menu). The visual display is triggered by a change in the CSS class applied to the menu link.

There are a number of different methods for applying style rules to a dynamic list of articles generated by CityDesk (see Sidebar), but the menu items in the Boomtown left navigation are static. So I had to go one step further and add a simple VBScript subroutine to control the CSS classes.

Assuming your hosting platform accommodates ASP pages, here's how you can use this technique:

Step 1: Create your style rules

The first step in styling your menu is to create a CSS style rule for a regular menu item and for the link to your currently selected page:

a.menulink { color: blue; }
a.currentlink { color: gray; }

Place these rules in your CSS stylesheet or in the header section of your template between the appropriate <style></style> tags.

Step 2: Reserve a template field

Make a list of the variables names you'll need for your navigation menu:

home = Home Page
about = About Our Company
contact = Contact Us

Then reserve one field in the template Properties to store your variable; I've chosen

{$.extra2$}

for this exercise. When you create a new page, fill in the variable name of the menu link you want to highlight for that page, i.e. "home" or "about".

Step 3: Create the ASP Subroutine

Place the following ASP subroutine code somewhere in your template:

<%
Option Explicit
Dim strThisNav
strThisNav = "{$.extra2$}"

Sub NavClass(selection)
    Dim strMenuSelect
    strMenuSelect = selection

    If strMenuSelect = strThisNav Then
        Response.Write "currentlink"
    Else
        Response.Write "menulink"
    End if
End sub
%>

Step 4: Call the subroutine

Insert the subroutine call inside the class attribute of your anchor tag, passing the variable name for that item:

<a href="(magic name)" class="<%Call NavClass("home")%>">Home</a>
<a href="(magic name)" class="<%Call NavClass("about")%>">About Us</a>
<a href="(magic name)" class="<%Call NavClass("contact")%>">Contact Us</a>

Check your result!

When you move from one page to another, the navigation link for your currently selected page should be dimmed out. This is also a useful technique for highlighting the current subdirectory if your menu displays static folder names instead of individual pages.