This shows two levels in the menu and could probably have others added.
You can see it at http://www.directpaintball.com.
For Conlib/Custom/VerticalMenu.ascx:
Code: Select all
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="VerticalMenu.ascx.cs" Inherits="ConLib_Custom_VerticalMenu" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<%--
<conlib>
<summary>Vertical Menu with Flyout</summary>
</conlib>
--%>
<ComponentArt:Menu id="Menu1"
DefaultGroupCssClass="MenuGroup"
DefaultItemLookID="DefaultItemLook"
ExpandDelay="50"
ImagesBaseUrl="~/App_Themes/DPBOlive/images/"
EnableViewState="false"
Orientation="Vertical"
ExpandDirection="BelowRight"
Width="170px"
runat="server">
<ItemLooks>
<ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ActiveCssClass="MenuItemActive" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="6" LabelPaddingBottom="6" />
<ComponentArt:ItemLook LookID="Level2ItemLook" CssClass="Level2Item" HoverCssClass="Level2ItemHover" ActiveCssClass="Level2ItemActive" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="6" LabelPaddingBottom="6" />
</ItemLooks>
</ComponentArt:Menu>
Code: Select all
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Catalog;
public partial class ConLib_Custom_VerticalMenu : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
BuildSiteNavBar();
}
private void BuildSiteNavBar()
{
ComponentArt.Web.UI.MenuItem newItem;
CategoryCollection subCategories = CategoryDataSource.LoadForParent(0, true);
int i = 0;
foreach (Category subCategory in subCategories)
{
newItem = new ComponentArt.Web.UI.MenuItem();
newItem.Text = subCategory.Name;
newItem.NavigateUrl = subCategory.NavigateUrl;
newItem.DefaultSubItemLookId = "Level2ItemLook";
newItem.SubGroupCssClass = "Level2Group";
Menu1.Items.Add(newItem);
CategoryCollection childCategories = CategoryDataSource.LoadForParent(subCategory.CategoryId, true);
foreach (Category childCategoriesList in childCategories)
{
newItem = new ComponentArt.Web.UI.MenuItem();
newItem.Text = childCategoriesList.Name;
newItem.NavigateUrl = childCategoriesList.NavigateUrl;
newItem.CssClass = "Level2ItemLook";
Menu1.Items[i].Items.Add(newItem);
}
i++;
}
}
}
Code: Select all
/* Vertical Menu ***********************/
.MenuGroup
{ background-color:#ffffff;
border-top: solid 0px #ebd0bf;
width:auto;
display:block;
position:relative;
z-index:100;
}
.MenuItem
{
background-color:#FFFFFF;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
display:block;
}
.MenuItemHover
{
background-color:#f9f8f3;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
display:block;
}
.MenuItemActive
{
background-color:#ffffff;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
display:block;
}
.MenuItemExpanded
{
background-color:#ffffff;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
}
.Level2Group
{
background-color:#f9f8f3;
color:#c77a49;
font-family:verdana;
font-size:11px;
border: dotted 1px #ebd0bf;
cursor:pointer;
width:auto;
}
.Level2Item
{
background-color:#f9f8f3;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
}
.Level2ItemHover
{
background-color:#ffffff;
color:#c77a49;
font-family:verdana;
font-size:11px;
font-weight:700;
border-bottom: solid 1px #ebd0bf;
cursor:pointer;
}
.Level2ItemActive
{
background-color:#ffffff;
color:#807d9f;
font-family:verdana;
font-size:11px;
font-weight:700;
border: solid 1px #ebd0bf;
border-top:0px;
cursor:pointer;
}
/** End Vertical Menu **/