MenuView

<ektron:MenuView>

The MenuView templated server control is used to display menu data retrieved from the Ektron CMS. It can display a single list of menu nodes as well as their child menu items. It can also be used to recursively display submenus and build a tree structure.

The MenuView templated server control is actually 2 controls that work together:

MenuModelSource. Specifies the menu data that you want to retrieve.
MenuView. Specifies how you want to display the menu.

Examples for MenuView

The MenuView templated server control has the following variations:

MenuView
API and Programatic Data
Custom Template
Declarative Data
Parent-Child Menu
Smart Menu Behavior

MenuView example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs"
  Inherits="MenuViewDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MenuView</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ektron:MenuModelSource ID="menuModelSource" runat="server">
                    <TreeFilter Id="6" Depth="0" />
                </ektron:MenuModelSource>
                <ektron:MenuView ID="menuView" runat="server"
                  ModelSourceID="menuModelSource" />
            </div>
        </form>
    </body>
</html>

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
}

API and programtic data example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs"
  Inherits="MenuViewDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MenuView - Api And ProgramaticData</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ektron:MenuModelSource ID="menuModelSource" runat="server">
                    <TreeFilter Id="6" Depth="0" />
                </ektron:MenuModelSource>
 
                <ektron:MenuView ID="menuView" runat="server"
                  ModelSourceID="menuModelSource">
                </ektron:MenuView>
            </div>
        </form>
    </body>
</html>

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ektron.Cms.Framework.UI.Controls.EktronUI;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    menuView.Items.Add(new MenuTreeNode { Text = "One (added in code-behind)",
      NavigateUrl = "http://www.ektron.com" });
    menuView.Items.Add(new MenuTreeNode { Text = "Two (added in code-behind)",
      NavigateUrl = "http://www.msn.com" });
 
    var node = new MenuTreeNode { Text = "three (added in code-behind)",
      NavigateUrl = "http://www.ektron.com" };
    node.Items.Add(new MenuTreeNode { Text = "child three-a
     (added in code-behind)", NavigateUrl = "http://www.ektron.com" });
    menuView.Items.Add(node);
  }
}

Custom template example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs"
  Inherits="MenuViewDemo" %>
      
<!DOCTYPE html>
     
<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">
    <title>MenuView - Custom Template</title>
    <style type="text/css">
      .Ektron-Site-MenuSample > ul
       {
         list-style: none;
         padding: 0 20px;
         margin: 0;
         float: left;
         width: 29em;
         background: #222;
         font-size: 1.2em;
       }
     
       .Ektron-Site-MenuSample ul.subnav li
       {
         float: left;
         margin: 0;
         padding: 0 15px 0 0;
         position: relative; /*--Declare X and Y axis base for sub navigation--*/
       }
     
       .Ektron-Site-MenuSample ul.subnav li a
       {
         padding: 10px 5px;
         color: #fff;
         display: block;
         text-decoration: none;
         float: left;
       }
     
       li.menuitem a
       {
         color: #fff !important;
       }
     
       .Ektron-Site-MenuSample ul.subnav li a:hover
       {
       }
     
       li.menuitem a:hover
       {
         background: #222 !important;
         color: #4384a5 !important;
       }
     
       li.menuitem a.active
       {
          color: #4384a5 !important;
       }
     
       .Ektron-Site-MenuSample ul.subnav li span
       { /*--Drop down trigger styles--*/
         width: 17px;
         height: 35px;
         float: left;
       }
     
       .Ektron-Site-MenuSample ul.subnav li ul.subnav
       {
         list-style: none;
         position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
         left: 0;
         top: 35px;
         background: #333;
         margin: 0;
         padding: 0;
         display: none;
         float: left;
         width: 170px;
         border: 1px solid #111;
       }
     
            .Ektron-Site-MenuSample ul.subnav li ul.subnav li
            {
                margin: 0;
                padding: 0;
                border-top: 1px solid #252525; /*--Create bevel effect--*/
                border-bottom: 1px solid #444; /*--Create bevel effect--*/
                clear: both;
                width: 170px;
            }
     
            .Ektron-Site-MenuSample html ul.subnav li ul.subnav li a
            {
                float: left;
                width: 145px;
                background: #333;
                padding-left: 20px;
            }
     
            .Ektron-Site-MenuSample html ul.subnav li ul.subnav li a:hover
            { /*--Hover effect for subnav links--*/
                background: #222;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ektron:MenuModelSource ID="uxMenuModelSource" runat="server">
                    <TreeFilter Id="6" />
                </ektron:MenuModelSource>
                <div class="Ektron-Site-MenuSample">
                    <ektron:MenuView ID="uxMainMenu" runat="server" ModelSourceID="uxMenuModelSource">
                        <ListTemplate>
                            <ul id="menunav" runat="server" class="subnav">
                                <asp:PlaceHolder ID="listPlaceholder" runat="server" />
                            </ul>
                        </ListTemplate>
                        <ItemTemplate>
                            <li <%# ((Eval("Type").ToString().ToLower() == "submenu")) ? @" class=""subnav""" : @" class=""menuitem""" %>>
                                <asp:HyperLink ID="nodeLink" runat="server" Text='<%# Eval("Text") %>' NavigateUrl='<%# Eval("NavigateUrl") %>' />
                                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                            </li>
                        </ItemTemplate>
                    </ektron:MenuView>
                </div>
     
                <ektronUI:JavaScriptBlock ID="menuCodeBlock" runat="server">
                    <ScriptTemplate>
                        if (typeof (Ektron.Controls) == 'undefined') {
                            Ektron.Controls = {};
                        }
     
                        Ektron.Controls.SmartMenu = {
                            /* properties */
                            isSelected: false,
                            expandTreeLoop: 0,
                            /* methods */
     
                            initMenu: function () {
                                // Default behaviour
                                Ektron.Controls.SmartMenu.Default();
     
                                // Expand all Submenus which has css class 'expand' (Regards to folder Associations.)
                                Ektron.Controls.SmartMenu.ExpandMenu();
     
                                // Expand all Submenus which has selected menu item. (Regards to URL.)
                                Ektron.Controls.SmartMenu.SelectMenuItem();
                            },
     
                            Default: function () {
                                $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
     
                                $("ul.subnav li")
                                    .hover(function () {
                                            //On hover over, add class "subhover"
                                            $(this).addClass("subhover"); 
     
                                            // Drop down the subnav on hover
                                            var hoversSubNav = $(this).find("ul.subnav");
                                            hoversSubNav.slideUp().stop(true, false);
                                            hoversSubNav.slideDown('fast').show();
     
                                        }, function () {    // On Hover Out
                                            // On hover out, remove class "subhover"
                                            $(this).removeClass("subhover"); 
     
                                            //When the mouse hovers out of the subnav, move it back up
                                            var hoversOutSubNav = $(this).find("ul.subnav");
                                            hoversOutSubNav.slideDown().stop(true, false); 
                                            hoversOutSubNav.slideUp('fast');
                                        }
                                    );
                            },
     
                            ExpandMenu: function () {
                                $('.expand').parents('.subnav').show();
                                $('.expand').next().show();
                            },
     
                            SelectMenuItem: function () {
                                var selecteditem = $("a[itemselected='True']");
                                $(selecteditem).addClass("active");
                            }
                        }
     
                        Ektron.Controls.SmartMenu.initMenu();
                    </ScriptTemplate>
                </ektronUI:JavaScriptBlock>
            </div>
        </form>
    </body>
</html>

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
}

Declarative data example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs" Inherits="MenuViewDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>MenuView - Declarative Data</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ektron:MenuModelSource ID="menuModelSource" runat="server" />
        <ektron:MenuView ID="menuView" runat="server" ModelSourceID="menuModelSource" >
            <Items>
                <ektronUI:MenuTreeItem Id="dec0" Text="Yahoo!" NavigateUrl="http://www.yahoo.com" />
                <ektronUI:MenuTreeItem Id="dec1" Text="Google" NavigateUrl="http://www.google.com" />
                <ektronUI:MenuTreeItem Id="dec2" Text="MSN" NavigateUrl="http://www.msn.com" />
                <ektronUI:MenuTreeItem Id="dec3" Text="Ektron" NavigateUrl="http://www.ektron.com" />
            </Items>
        </ektron:MenuView>    
    </div>
    </form>
</body>
</html>

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
}

Parent-child menu example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs" Inherits="MenuViewDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MenuView - Parent-Child Menu</title>
        <style type="text/css">
            .mainMenu,
            .secondMenu
            {
                clear: both;
            }
 
            .Ektron-Site-MenuSample ul
            {
                list-style: none;
                padding: 0 20px;
                margin: 0;
                float: left;
                width: 30em;
                background: #222;
                font-size: 1.2em;
            }
 
            .Ektron-Site-MenuSample ul.subnav li
            {
                float: left;
                margin: 0;
                padding: 0 15px 0 0;
                position: relative;
            }
 
            .Ektron-Site-MenuSample ul.subnav li a
            {
                padding: 10px 5px;
                display: block;
                text-decoration: none;
                float: left;
            }
 
            .Ektron-Site-MenuSample li a
            {
                color: #fff;
            }
 
            .Ektron-Site-MenuSample li.active a
            {
                color: #4384a5 !important;
            }
 
            .Ektron-Site-MenuSample li a:hover
            {
                background: #222 !important;
                color: #4384a5 !important;
            }
 
            .secondMenu ul
            {
                background: #333;
                border-top: 1px solid silver;
            }
 
            .secondMenu li.active a
            {
                color: gray !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="Ektron-Site-MenuSample mainMenu">
                <ektron:MenuModelSource ID="uxMainMenuModelSource" runat="server">
                    <TreeFilter Id="39" />
                </ektron:MenuModelSource>
 
                <ektron:MenuView ID="uxMainMenu" runat="server" ModelSourceID="uxMainMenuModelSource">
                    <ListTemplate>
                        <ul id="menunav" runat="server" class="subnav">
                            <asp:PlaceHolder ID="listPlaceholder" runat="server" />
                        </ul>
                    </ListTemplate>
                    <ItemTemplate>
                        <li class='<%# ((Eval("Type") != null && Eval("Type").ToString().ToLower() == "submenu")) ? @"subnav" : @"menuitem" %> <%# ((bool)Eval("Selected")) ? @"active" : "" %>'>
                            <asp:HyperLink ID="nodeLink" runat="server" Text='<%# Eval("Text") %>' expanded='<%# Eval("Expanded") %>'
                                class='<%# (Boolean.Parse(Eval("Expanded").ToString())) ? @"expand" : @"collapse" %>'
                                NavigateUrl='<%# Eval("NavigateUrl") %>' itemselected='<%# Eval("Selected") %>' />
                        </li>
                    </ItemTemplate>
                </ektron:MenuView>
            </div>
            <div class="Ektron-Site-MenuSample secondMenu">
                <ektron:MenuModelSource ID="uxSecondaryMenuSource" runat="server">
                </ektron:MenuModelSource>
                <ektron:MenuView ID="uxSecondaryMenuView" runat="server" ModelSourceID="uxSecondaryMenuSource">
                    <ListTemplate>
                        <ul id="menunav" runat="server" class="subnav">
                            <asp:PlaceHolder ID="listPlaceholder" runat="server" />
                        </ul>
                    </ListTemplate>
                    <ItemTemplate>
                        <li class='<%# ((Eval("Type").ToString().ToLower() == "submenu")) ? @"subnav" : @"menuitem" %> <%# ((bool)Eval("Selected")) ? @"active" : "" %>'>
                            <asp:HyperLink ID="nodeLink" runat="server" Text='<%# Eval("Text") %>' expanded='<%# Eval("Expanded") %>'
                                class='<%# (Boolean.Parse(Eval("Expanded").ToString())) ? @"expand" : @"collapse" %>'
                                NavigateUrl='<%# Eval("NavigateUrl") %>' itemselected='<%# Eval("Selected") %>' />
                        </li>
                    </ItemTemplate>
                </ektron:MenuView>
            </div>
            <div style="clear: both;">
                <br /><br />
                NOTES: 
                <ul>
                    <li>
                        This demo requires a menu in the CMS; be sure to set the MenuModelSource-TreeFilter 
                        Id to the proper menu (if using OnTrek, there is a sample menu with Id 39).
                    </li>
                    <li>
                        To make the secondary menu work when this code is copied to 
                        a test page, you will need either change the link for "Framework 
                        UI" (under menu "Sample Developer Master Slave Menu")
                        from "/OnTrek//developer/framework/ui/controls/TemplatedServerControls/MenuView/ParentChildMenu.aspx?sample=FrameworkUI" 
                        to the URL and querystring for your test page, or add a new child menu 
                        with the URL set to the URL and querystring for your test page (and add 
                        any child nodes that you want to show up in the secondary menu).
                    </li>
                </ul>
            </div>
        </form>
    </body>
</html>

.aspx.cs

IMPORTANT: Regarding the following code near the end of this sample:

//LoadData needs to be called to reload Views, but its protected. uxSecondaryMenuSource.GetType().GetMethod("LoadData", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.FlattenHierarchy).Invoke(uxSecondaryMenuSource, new object[] { });

In 9.10 SP2 and later releases, you must replace it with the following. The new code does not work with 9.10 SP1 or earlier.

void MainMenu_MenuItemChanged(object sender, ParentChildMenuEventArgs menuEventArgs) { //Initialize Menu Source uxSecondaryMenuSource.TreeFilter.Id = menuEventArgs.CurrentMenuItemId; uxSecondaryMenuSource.TreeFilter.Depth = 1; uxSecondaryMenuSource.LoadData(); }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ektron.Cms;
using Ektron.Cms.Framework.Content;
using Ektron.Cms.Framework.UI.Controls.Views;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
    public class ParentChildMenuEventArgs : EventArgs
    {
        public long CurrentMenuItemId { get; set; }
    }
 
    public delegate void MenuItemChangedHandler(object sender, ParentChildMenuEventArgs menuEventArgs);
    public event MenuItemChangedHandler MenuItemChanged;
 
    public long MenuId { get; set; }
    public long ContentId { get; set; }
    public ContentData Content;
 
    protected void Page_Init(object sender, EventArgs e)
    {
        // Content Dynamic Parameter
        this.SetContentParameter();
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        uxMainMenu.NodeBound += new TreeViewEventHandler(uxMainMenu_NodeBound);
        uxSecondaryMenuView.NodeBound += new TreeViewEventHandler(uxMainMenu_NodeBound);
        MenuItemChanged += new MenuItemChangedHandler(MainMenu_MenuItemChanged);
    }
 
 
    private void SetContentParameter()
    {
        //If there is querystring parameter for Content Id, load the current content.
        string ContentParameterId = "id";
 
        if (!string.IsNullOrEmpty(Request.QueryString[ContentParameterId]))
        {
            this.ContentId = Convert.ToInt64(Request.QueryString[ContentParameterId]);
 
            if (this.ContentId > 0)
            {
                var contentManager = new ContentManager();
                Content = contentManager.GetItem(this.ContentId, false);
            }
        }
    }
 
    void uxMainMenu_NodeBound(object sender, TreeViewEventArgs e)
    {
        // If the Navigation URL matches with the Current URL then Select it.
        if (!string.IsNullOrEmpty(e.Item.NavigateUrl))
        {
            if (Page.Request.RawUrl.ToLower().Contains(e.Item.NavigateUrl.ToLower()))
            {
                e.Item.Selected = true;
 
                //Firing the MenuItemChangedHandler Event
                if (MenuItemChanged != null && ((MenuView)sender).ID == "uxMainMenu")
                {
                    MenuItemChanged(this, new ParentChildMenuEventArgs { CurrentMenuItemId = Convert.ToInt64(e.Item.Id.Split('|')[0]) });
                }
            }
        }
 
        // URL ContentId exists in the Menuitems then Select it.
        if (this.ContentId > 0 && !string.IsNullOrEmpty(e.Item.Id))
        {
            if (e.Item.Items != null && e.Item.Items.Any())
            {
                foreach (Ektron.Cms.Framework.UI.Controls.EktronUI.MenuTreeNode x in e.Item.Items)
                {
                    if (x.ItemId == this.ContentId.ToString())
                    {
                        // You can manipulate menu item properties here.
                        x.Selected = true;
                        x.Expanded = true;
                        e.Item.Expanded = true;
 
                        // Firing the MenuItemChangedHandler Event 
                        if (MenuItemChanged != null)
                        {
                            MenuItemChanged(this, new ParentChildMenuEventArgs { CurrentMenuItemId = Convert.ToInt64(x.ItemId) });
                        }
                    }
                    else
                    {
                        x.Selected = false;
                        x.Expanded = false;
                    }
                }
            }
        }
 
        // Expand SubMenu Based up on the Associated folders.
        if (e.Item.Type != null && e.Item.Type.ToLower() == "submenu")
        {
            var submenudata = (Ektron.Cms.Framework.UI.Controls.EktronUI.MenuTreeNode)e.Item;
            if (Content != null && submenudata.AssociatedFolders.Contains(Content.FolderId))
            {
                e.Item.Expanded = true;
                e.Item.Selected = true;
            }
        }
    }
 
 
    void MainMenu_MenuItemChanged(object sender, ParentChildMenuEventArgs menuEventArgs)
    {
        //Initialize Menu Source
        uxSecondaryMenuSource.TreeFilter.Id = menuEventArgs.CurrentMenuItemId;
        uxSecondaryMenuSource.TreeFilter.Depth = 1;
        uxSecondaryMenuSource.LoadData();
    }
}

Smart menu behavior example

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuViewDemo.aspx.cs" Inherits="MenuViewDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MenuView - SmartMenu Sample</title>
        <style type="text/css">
    
            .Ektron-Site-MenuSample > ul{
                list-style: none;
                padding: 0 20px;
                margin: 0;
                float: left;
                width: 34em;
                background: #222;
                font-size: 1.2em;
            }
 
            .Ektron-Site-MenuSample ul.subnav li {
                float: left;
                margin: 0;
                padding: 0 15px 0 0;
                position: relative; /*--Declare X and Y axis base for sub navigation--*/
            }
            .Ektron-Site-MenuSample ul.subnav li a{
                padding: 10px 5px;
                color: #fff;
                display: block;
                text-decoration: none;
                float: left;
            }
 
            .Ektron-Site-MenuSample ul.subnav li a:hover{
                    background: #222  !important;
                    color: #4384a5 !important;
            }
            .Ektron-Site-MenuSample ul.subnav li.active a
            {
                    color: #4384a5 !important;
            }
 
            .Ektron-Site-MenuSample ul.subnav li span { /*--Drop down trigger styles--*/
                width: 17px;
                height: 35px;
                float: left;
            }
    
            .Ektron-Site-MenuSample ul.subnav li ul.subnav {
                list-style: none;
                position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
                left: 0; top: 35px;
                background: #333;
                margin: 0; padding: 0;
                display: none;
                float: left;
                width: 170px;
                border: 1px solid #111;
            }
            .Ektron-Site-MenuSample ul.subnav li ul.subnav li{
                margin: 0; padding: 0;
                border-top: 1px solid #252525; /*--Create bevel effect--*/
                border-bottom: 1px solid #444; /*--Create bevel effect--*/
                clear: both;
                width: 170px;
            }
            .Ektron-Site-MenuSample html ul.subnav li ul.subnav li a {
                float: left;
                width: 145px;
                background: #333;
                padding-left: 20px;
            }
            .Ektron-Site-MenuSample html ul.subnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
                background: #222; 
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="Div1" class="Ektron-Site-MenuSample">
                <ektron:MenuModelSource ID="uxSmartMenuModelSource" runat="server">
                    <TreeFilter Id="50" />
                </ektron:MenuModelSource>
 
                <ektron:MenuView ID="uxMainMenu" runat="server" ModelSourceID="uxSmartMenuModelSource">
                    <ListTemplate>
                        <asp:Literal ID="ulBeginTag" runat="server" Text="<ul class='subnav'>" />
                        <asp:PlaceHolder ID="listPlaceholder" runat="server" />
                        <asp:Literal ID="ulEndTag" runat="server" Text="</ul>" />
                    </ListTemplate>
                    <ItemTemplate>
                        <li class='<%# ((Eval("Type") != null && Eval("Type").ToString().ToLower() == "submenu")) ? @"subnav" : @"menuitem" %> <%# ((bool)Eval("Selected")) ? @"active" : "" %>'>
                            <asp:HyperLink ID="nodeLink" runat="server" Text='<%# Eval("Text") %>' expanded='<%# Eval("Expanded") %>'
                                class='<%# (Boolean.Parse(Eval("Expanded").ToString())) ? @"expand" : @"collapse" %>'
                                NavigateUrl='<%# Eval("NavigateUrl") %>' itemselected='<%# Eval("Selected") %>' />
                            <ektronUI:PlaceHolderControl ID="itemPlaceholder" runat="server" />
                        </li>
                    </ItemTemplate>
                </ektron:MenuView>
            </div>
            <ektronUI:JavaScriptBlock ID="menuCodeBlock" runat="server">
                <ScriptTemplate>
                    if (typeof (Ektron.Controls) == 'undefined') {
                        Ektron.Controls = {};
                    }
 
                    Ektron.Controls.SmartMenu = {
                        /* properties */
                        isSelected: false,
                        expandTreeLoop: 0,
                        /* methods */
 
                        initMenu: function () {
                            // Default behaviour
                            Ektron.Controls.SmartMenu.Default();
 
                            // Expand all Submenus which has css class 'expand' (Regards to folder Associations.)
                            Ektron.Controls.SmartMenu.ExpandMenu();
 
                            // Expand all Submenus which has selected menu item. (Regards to URL.)
                            Ektron.Controls.SmartMenu.SelectMenuItem();
                        },
 
                        Default: function () {
                            $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
 
                            $("ul.subnav li")
                                .hover(function () {
                                        //On hover over, add class "subhover"
                                        $(this).addClass("subhover"); 
 
                                        // Drop down the subnav on hover
                                        var hoversSubNav = $(this).find("ul.subnav");
                                        hoversSubNav.slideUp().stop(true, false);
                                        hoversSubNav.slideDown('fast').show();
 
                                    }, function () {    // On Hover Out
                                        // On hover out, remove class "subhover"
                                        $(this).removeClass("subhover"); 
 
                                        //When the mouse hovers out of the subnav, move it back up
                                        var hoversOutSubNav = $(this).find("ul.subnav");
                                        hoversOutSubNav.slideDown().stop(true, false); 
                                        hoversOutSubNav.slideUp('fast');
                                    }
                                );
                        },
 
                        ExpandMenu: function () {
                            $('.expand').parents('.subnav').show();
                            $('.expand').next().show();
                        },
 
                        SelectMenuItem: function () {
                            var selecteditem = $("a[itemselected='True']");
                            $(selecteditem).addClass("active");
                            selecteditem.parents('.subnav').show();
                        }
                    }
 
                    Ektron.Controls.SmartMenu.initMenu();
                </ScriptTemplate>
            </ektronUI:JavaScriptBlock>
        </form>
    </body>
</html>

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ektron.Cms;
using Ektron.Cms.Framework.UI.Controls.EktronUI.Utilities;
using Ektron.Cms.Framework.UI.Controls.Views;
using Ektron.Cms.Framework.Content;
using Ektron.Cms.Framework.UI.Controls.EktronUI;
using Ektron.Cms.Framework.UI.Tree;
 
public partial class MenuViewDemo : System.Web.UI.Page
{
    public class SmartMenuEventArgs : EventArgs
    {
        public long CurrentMenuItemId { get; set; }
    }
 
    public delegate void MenuItemChangedHandler(object sender, SmartMenuEventArgs menuEventArgs);
    public event MenuItemChangedHandler MenuItemChanged;
    public long MenuId { get; set; }
    public long ContentId { get; set; }
    public ContentData Content;
 
    protected override void OnInit(EventArgs e)
    {
        // Content Dynamic Parameter
        this.SetContentParameter();
 
        base.OnInit(e);
    }
 
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
 
        uxMainMenu.NodeBound += new TreeViewEventHandler(uxMainMenu_NodeBound);
        uxMainMenu.ListBound += uxMainMenu_ListBound;
        MenuItemChanged += new MenuItemChangedHandler(MainMenu_MenuItemChanged);
 
        // The smart-menu behavior will select a menu-node whose URL matches the current page,
        // providing visual feedback to the user. We need to demonstrate this on a single page;
        // adding some menu items to demonstrate smart-menu behavior (in reality, this menu would 
        // either be on each target page, or shared via a masterpage. For this example, we need
        // to have links that return to this page, but with different querystring values we can 
        // use to select the relevant menu node. The following few lines wouldn't normally be needed):
 
        uxMainMenu.Items.Add(new MenuTreeNode { Text = "One", NavigateUrl = Request.FilePath + "?option=one" });
        uxMainMenu.Items.Add(new MenuTreeNode { Text = "Two", NavigateUrl = Request.FilePath + "?option=two" });
        // add child menu items:
        var node = new MenuTreeNode { Text = "Three", Type = "submenu", NavigateUrl = Request.FilePath + "?option=three" };
        node.Items.Add(new MenuTreeNode { Text = "Three-A", NavigateUrl = Request.FilePath + "?option=3a" });
        node.Items.Add(new MenuTreeNode { Text = "Three-B", NavigateUrl = Request.FilePath + "?option=3b" });
        uxMainMenu.Items.Add(node);
    }
 
    protected void uxMainMenu_ListBound(object sender, TreeViewEventArgs e)
    {
        var control = sender as Control;
        var ulBeginTag = ControlUtilities.FindControl(control, "ulBeginTag");
 
        if (ulBeginTag != null)
        {
            var literal = ulBeginTag as Literal;
 
            if (literal != null)
            {
                literal.Text = (e.Item.Type.ToLower() == "menu") ? @"<ul class=""mainNavigation subnav"">" : @"<ul class=""subnav"">";
            }
        }
    }
 
    private void SetContentParameter()
    {
 
        //If there is querystring parameter for Content Id, load the current content.
        string ContentParameterId = "id";
 
        if (!string.IsNullOrEmpty(Request.QueryString[ContentParameterId]))
        {
            this.ContentId = Convert.ToInt64(Request.QueryString[ContentParameterId]);
 
            if (this.ContentId > 0)
            {
                var contentManager = new ContentManager();
                Content = contentManager.GetItem(this.ContentId, false);
            }
        }
    }
 
    protected void uxMainMenu_NodeBound(object sender, TreeViewEventArgs e)
    {
        // If the Navigation URL matches with the Current URL then Select it.
        if (!string.IsNullOrEmpty(e.Item.NavigateUrl))
        {
            if (Page.Request.RawUrl.ToLower().Contains(e.Item.NavigateUrl.ToLower()))
            {
                e.Item.Selected = true;
 
                //Firing the MenuItemChangedHandler Event
                if (MenuItemChanged != null)
                {
                    MenuItemChanged(this, new SmartMenuEventArgs { CurrentMenuItemId = this.ContentId });
                }
            }
        }
 
        // URL ContentId exists in the Menuitems then Select it.
        if (this.ContentId > 0 && !string.IsNullOrEmpty(e.Item.Id))
        {
            if (e.Item.Items != null && e.Item.Items.Any())
            {
                foreach (Ektron.Cms.Framework.UI.Controls.EktronUI.MenuTreeNode x in e.Item.Items)
                {
                    if (x.ItemId == this.ContentId.ToString())
                    {
                        // You can manipulate menu item properties here.
                        x.Selected = true;
                        x.Expanded = true;
                        e.Item.Expanded = true;
 
                        // Firing the MenuItemChangedHandler Event 
                        if (MenuItemChanged != null)
                        {
                            MenuItemChanged(this, new SmartMenuEventArgs { CurrentMenuItemId = Convert.ToInt64(x.ItemId) });
                        }
                    }
                    else
                    {
                        x.Selected = false;
                        x.Expanded = false;
                    }
                }
            }
        }
 
        // Expand SubMenu Based up on the Associated folders.
        if (e.Item.Type != null && e.Item.Type.ToLower() == "submenu")
        {
            var submenudata = (Ektron.Cms.Framework.UI.Controls.EktronUI.MenuTreeNode)e.Item;
            if (Content != null && submenudata.AssociatedFolders.Contains(Content.FolderId))
            {
                e.Item.Expanded = true;
                e.Item.Selected = true;
            }
        }
    }
 
    protected void MainMenu_MenuItemChanged(object sender, SmartMenuEventArgs menuEventArgs)
    {
        // custom code can utilize this event...
 
    }
}

MenuView

Attributes for MenuView

Properties for MenuView

Events for MenuView

Methods for MenuView

Theming for MenuView

Examples for MenuView

MenuView example

.aspx

.aspx.cs

API and programtic data example

.aspx

.aspx.cs

Custom template example

.aspx

.aspx.cs

Declarative data example

.aspx

.aspx.cs

Parent-child menu example

.aspx

.aspx.cs

Smart menu behavior example

.aspx

.aspx.cs