Custom Menu CSS Classes

Custom Menu CSS Classes

The skins included with mojoPortal content management system use a common set of CSS classes rendered on the Menu and TreeView controls, but sometimes people may want to use different CSS classes. It is possible to control the CSS classes (and other properties) rendered on the Menu and TreeView controls from the theme.skin file.

There are a variety of configurable properties that can control which (if any) CSS classes are rendered on the li element and/or on the a (link) element for menu items.

This is an example from a theme.skin file showing the default settings for the menu used in most skins.

<portal:mojoMenu runat="server" SkinID="SiteMenu"
  RenderContainerCssClass="true"
  RenderCssClasses="true"
  RenderAnchorSelectedCss="true"
  RenderLiSelectedCss="true"
  RenderImages="true"
  UlCssClass="AspNet-Menu"
  LiCssClassWithChildren="AspNet-Menu-WithChildren"
  LiCssClassWithoutChildren="AspNet-Menu-Leaf"
  LiSelectedCssClassWithChildren="AspNet-Menu-SelectedWithChildren"
  LiSelectedCssClassWithoutChildren="AspNet-Menu-SelectedLeaf"
  LiChildSelectedCssClass="AspNet-Menu-ChildSelected"
  LiParentSelectedCssClass="AspNet-Menu-ParentSelected"
  AnchorCssClass="AspNet-Menu"
  AnchorSelectedCssClassWithChildren="AspNet-Menu-SelectedWithChildren"
  AnchorSelectedCssClassWithoutChildren="AspNet-Menu-SelectedLeaf"
  AnchorChildSelectedCssClass="AspNet-Menu-ChildSelected"
  AnchorParentSelectedCssClass="AspNet-Menu-ParentSelected"
/>

and this is an example for when TreeView is used.

<portal:mojoTreeView runat="server" SkinID="SiteMenu"
  ContainerCssClass="AspNet-TreeView"
  RootUlCssClass=""
  RenderLiCssClasses="true"
  RenderAnchorCss="false"
  LiCssClass="AspNet-TreeView-Leaf"
  LiRootExpandableCssClass="AspNet-TreeView-Root"
  LiRootNonExpandableCssClass="AspNet-TreeView-Root AspNet-TreeView-Leaf"
  LiNonRootExpnadableCssClass="AspNet-TreeView-Parent"
  LiSelectedCssClass="AspNet-TreeView-Selected"
  LiChildSelectedCssClass="AspNet-TreeView-ChildSelected"
  LiParentSelectedCssClass="AspNet-TreeView-ParentSelected"
  AnchorCssClass="inactive"
  AnchorSelectedCssClass="current"
 
/>

Note that the SkinID above is "SiteMenu", you can control the TreeView on the SiteMap page separately like this based on the SkinID "SiteMapPage"

<portal:mojoTreeView runat="server" SkinID="SiteMapPage"
   ContainerCssClass="sitemap"
   RootUlCssClass=""
   RenderLiCssClasses="false"
   RenderAnchorCss="true"
   LiCssClass=""
   LiRootExpandableCssClass=""
   LiRootNonExpandableCssClass=""
   LiNonRootExpnadableCssClass=""
   LiSelectedCssClass=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClass=""
   ExpandDepth="-1"
   ShowExpandCollapse="false"
   PopulateNodesFromClient="false"
 
  />

and the Child Page Site Map (if enabled in Page Settings for a page) can also be configured separately like this:

<portal:mojoTreeView runat="server" SkinID="ChildSiteMap"
   ContainerCssClass="sitemap"
   RootUlCssClass=""
   RenderLiCssClasses="false"
   RenderAnchorCss="true"
   LiCssClass=""
   LiRootExpandableCssClass=""
   LiRootNonExpandableCssClass=""
   LiNonRootExpnadableCssClass=""
   LiSelectedCssClass=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClass=""
   ExpandDepth="-1"
   ShowExpandCollapse="false"
   PopulateNodesFromClient="false"
 
  />

Note that this technique is also used in order to render the needed CSS classes for Artisteer designs as shown in this example for a horizontal menu using the latest version of Artisteer 3.

<portal:mojoMenu runat="server" SkinID="SiteMenu"
   RenderContainerCssClass="true"
   RenderImages="false"
   UseMenuTooltipForCustomCss="true"
   RenderCustomClassOnLi="true"
   RenderCustomClassOnAnchor="false"
   RenderLiSelectedCss="false"
   RenderAnchorSelectedCss="true"
   UlCssClass="art-hmenu"
   LiCssClassWithChildren=""
   LiCssClassWithoutChildren=""
   LiSelectedCssClassWithChildren=""
   LiSelectedCssClassWithoutChildren=""
   LiChildSelectedCssClass=""
   LiParentSelectedCssClass=""
   AnchorCssClass=""
   AnchorSelectedCssClassWithChildren="active"
   AnchorSelectedCssClassWithoutChildren="active"
   AnchorChildSelectedCssClass=""
   AnchorParentSelectedCssClass=""
   InnerSpanMode="Artisteer"
 
  />

This example shows how the jqueryui-1 skin is configured to render the classes needed for Superfish menu.

<portal:mojoTreeView runat="server" SkinID="Superfish"
  ContainerCssClass="AspNet-Menu-Horizontal"
  RootUlCssClass="sf-menu sf-navbar"
  RenderLiCssClasses="true"
  RenderAnchorCss="true"
  LiCssClass=""
  LiRootExpandableCssClass="sf-with-ul"
  LiRootNonExpandableCssClass=""
  LiNonRootExpnadableCssClass=""
  LiSelectedCssClass="current"
  LiChildSelectedCssClass="current"
  LiParentSelectedCssClass=""
  AnchorCssClass="inactive"
  AnchorSelectedCssClass="current"
 
/>

Note that in the above example it is using "Superfish" for the SkinID, this works because in layout.master we have specified that SkinID on the SiteMenu like this.

<portal:SiteMenu id="SiteMenu1" runat="server"
    MenuSkinID="Superfish"
             UseTreeView="true"
    TreeViewShowExpandCollapse="false"
    TreeViewExpandDepth="-1" 
    HideMenuOnSiteMap="false" ></portal:SiteMenu>

Hopefully these examples are illustrative and provide examples to fuel your own experimentation.

Last Updated 2011-05-17 by Joe Audette