Menu Templating



With the Menu control we wanted to be able to render nearly any kind of menu. So, we built a templating structure that would mimic the database layout. We could layout the html needed for the root menu items and their children. By continually nesting menuitems we can build a menu of any depth we wanted. The predefined menu templates use this same structure.

Simple Unordered List

One of the simplest forms of a menu is just a nested unordered list.

Html Source

<cc1:Menu ID="Menu" runat="server" SelectedCss="selected">
  <ul>
    <cc1:MenuItem ID="menuitem1" runat="server">
      <li><a href="##link##">##Name##</a></li>
      <hasChildren>
        <ul>
          <cc1:MenuItem ID="menuitem2" runat="server">
            <li><a href="##link##">##Name##</a></li>            		                       				
          </cc1:MenuItem>
        </ul>
      </hasChildren>
    </cc1:MenuItem>
  </ul>
</cc1:Menu>

The Menu and MenuItems tags will render the pages located in the pages tree of Admin Panel. Each Menuitem represents a row that will be looped through. The text ##id##, ##link## and ##name## will be replaced by the data in the columns id, Link, and PageName from the DTIDynamicPage table created by Admin Panel. The hasChildren tag determines what html will be rendered if a given parent has children. Recursion has to be detailed manually. If only one menuitem is present it will only loop through the root pages. If you want any children to render another menuitem will have to be placed inside a parent menuitem. The above example only renders the root and their children. With this information only a great many diffent menus can be generated.

Simple Unordered List with css

By adding a little bit of css a very simple menu can be made.

Html Source

<cc1:Menu ID="Menu1" runat="server" SelectedCss="selected">
  <ul>
    <cc1:MenuItem ID="menuitem3" runat="server">
      <li><a href="##link##">##Name##</a></li>
    </cc1:MenuItem>
  </ul>
</cc1:Menu>

Javascript Accordian Menu



Add javascript and some really powerful menus can be created. In this example I utilized a Dynamic Drive Menu. Also in this example is the OverrideItem class. This allows you to override a specific menuitem by specifing the page's name in the name attribute. In this case I appended the text "Overridden" to the support link, but because Support is a root item its children's menu structure will need to be redifined with another menuitem inside the overrideitem class.

Html Source

<cc1:Menu ID="Menu2" runat="server" CssClass="navcontainer" SelectedCss="active">
    <cc1:OverrideItem ID="OverrideItem1" runat="server" Name="support">
        <hasChildren>
        <h3 class="headerbar">##name## Overridden</h3>
            <ul class="submenu">
            <cc1:MenuItem ID="menuitem6" runat="server">
                <li><a href="##link##">##name##</a></li>
            </cc1:MenuItem>    
            </ul>
        </hasChildren>
    </cc1:OverrideItem>

    <div class="urbangreymenu">
        <cc1:MenuItem ID="menuitem4" runat="server">
            <hasChildren>
            <h3 class="headerbar">##name##</h3>         
                <ul class="submenu">
                <cc1:MenuItem ID="menuitem5" runat="server">
                    <li><a href="##link##">##name##</a></li>
                </cc1:MenuItem>    
                </ul>
            </hasChildren>
        </cc1:MenuItem>
    </div>
</cc1:Menu>