Flyout left menu using Componentart.

[jmestep]

For those of you who are looking for a flyout menu, here is some code. It be changed to horizontal also by changing the Orientation="vertical". If you are having trouble with the styles, it could be coming from the ComponentArt.css in your App_Themes folder where there are standard formatting styles.
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>

For Conlib/Custom/VerticalMenu.ascx.cs:

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++;

        }


    }
}

For style sheet section:

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 **/

[Sean@WMS]

Judy's solution here is excellent, and we are really grateful to her for sharing it with us. We've installed it at http://www.BarParts.com

I'd just like to add two things here:

1) ComponentArt automatically includes text in nobr tags, which force each item not to wrap. This can be undesirable with longer category names. To work around this, simply add the following CSS:

Code: Select all

.MenuItem nobr, .MenuItemHover nobr, .MenuItemActive nobr {
	white-space: normal;
}

2) When I first tried installing this I spent quite a while pulling my hair out on the orientation and a few other parameters. Eventually I discovered that the parameters I was setting were being overriden by the default ComponentArt.skin file that is included in each Theme. So, for other newbies to AC7, be forewarned: you will need to do something about that. I ended up just commenting out the parameters that were set there for the Menu:

Code: Select all

<%-- Default Menu Style --%>
<%--
<ComponentArt:Menu runat="server"
    Orientation="Horizontal"
    CssClass="MenuGroup"
    DefaultGroupCssClass="MenuGroup"
    DefaultItemLookID="DefaultItemLook"
    TopGroupItemSpacing="0"
    DefaultGroupItemSpacing="1"
    ImagesBaseUrl="~/App_Themes/AbleCommerce/images/ComponentArt/Menu"
    ExpandTransition="None"
    CollapseTransition="None"
    ExpandDelay="50"
    Height="24px">
    <ItemLooks>
        <ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" ActiveCssClass="TopMenuItemActive" ExpandedCssClass="TopMenuItemExpanded" LeftIconUrl="blueDots.gif" HoverLeftIconUrl="blueDots.gif" ExpandedLeftIconUrl="blueDots.gif" LeftIconWidth="17" LeftIconHeight="12" LabelPaddingLeft="5" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="5" />
        <ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ActiveCssClass="MenuItemActive" ExpandedCssClass="MenuItemExpanded" LeftIconUrl="blueDots.gif" HoverLeftIconUrl="blueDots.gif" ExpandedLeftIconUrl="blueDots.gif" LeftIconWidth="17" LeftIconHeight="12" LabelPaddingLeft="5" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="5" />
        <ComponentArt:ItemLook LookID="ItemBreak" ImageUrl="break.gif" CssClass="MenuBreak" />
    </ItemLooks>
</ComponentArt:Menu>
--%>

[jmestep]

A follow up on this one.
On one site, I switched from using a hard coded/main category only left navigation to using this. First one had about a dozen categories using <li> and style sheet, new one used this with one level of subcategories in the flyout.
About a week after I switched, we dropped 30 positions in Google rankings for 4 of the main keywords I have been reporting on for Google rankings. I didn't think about what had happened, but when asked, I got to checking and that was the only thing I had changed. I switched back to the hardcoded and we're creeping up in rankings again. It could be coincidence because WebCEO told me Google changes their algorithms a lot in August, but no one else here on the forum was checking to see if it was happening to others, as people usually do.
I think Google just read thru so many characters of text and stopped without getting to the page guts-- that's all I can figure. I'm experimenting on everything but my default.aspx by keeping the flyout menu on them, but re-arranging my td cells on the page so that SEs read the page guts first. I had heard about that a couple of different places on the web and when I do a search engine view on those pages, it goes right to the page guts.
Just posting here to let anyone else know.
Here is what I changed my Three Column .htm scriplet to-- it doesn't change the appearance in the browser, but puts a blank td where the left menu would have been.

Code: Select all

<!--
<Description>
Displays headers, footers, a left sidebar, a right sidebar, and a main content area.
</Description>
-->

[[layout:header]]
<div id="outerContentWrapper">
	<div id="innerContentWrapper">
		<table cellspacing="0" cellpadding="0" id="contentLayout">
			<tr>
				<td></td>
				<td align="left" valign="top" id="mainPanel"rowspan="2">
					[[layout:content]]
				</td>
<td></td>
				
			</tr>
<tr>
<td align="left" valign="top" id="leftSidebarPanel">
					[[layout:sidebar]]
</td>
<td></td>
<td align="left" valign="top" id="rightSidebarPanel">
					[[layout:sidebar2]]
				</td>
</tr>

		</table>
	</div>
	[[layout:footer]]
</div>

[Sean@WMS]

Excellent post here, Judy, resusitating that old but true SEO table layout trick.

For anyone that blinked while reading the markup code, the trick is to use two rows, put your main contents in the middle column of the first row while leaving the left and right columns empty while giving the middle column in the frist row a rowspan of 2; then on the second row, include your AC7 sidebars in columns 1 & 3, leaving the middle column blank.

Unfortunately, while this achives the SEO objective of getting your core page contents up above the sidebars in the markup ( which is basically how SE robots look at your site content ) it does introduce two blank cells, one above column 1 and one above column 3. However, this isn't an issue in FF 2 or 3, Safari 3 for PC's, and Google's Chrome beta . . . but with IE 6 & IE 7 ( and now IE 8 is in beta ), those blank cells display as what looks like a 1px top border.

This might not be a concern depending on your graphic design, but on really tight grahic designs, it will be very noticible.

I'll be looking at what can be done about this vis CSS next week. This week I got pre-occupied on how AC 7's "old school" table layouts might be converted to the 21st century ( ditching tables for layout and using pure XHTML/CSS for structure and display ) -- not so easy.

But if anyone would like to jump ahead of me here, please do, and there is the best aticle I have found vis a vis CSS theory on a three column fluid layout which should be adaptable to AV7's "Three Colmn" scriplet:
http://www.alistapart.com/articles/holygrail

[jmestep]

So that's where that pesky while space came from. I changed the td bgcolor and now it looks OK. I hate IE>
I did find out that you can put images in the control, like an arrow.

Code: Select all

<ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ActiveCssClass="MenuItemActive" LabelPaddingLeft="10" 
	  LabelPaddingRight="10" LabelPaddingTop="6" LabelPaddingBottom="6" LeftIconUrl="left_arrow.gif"  LeftIconWidth="10" LeftIconHeight="7" LeftIconVisibility="WhenExpandable"/>

And that you can wrap long Category names by putting this in the code that defines the menu
DefaultItemTextWrap="True"

[Sean@WMS]

Hi Judy,

I had to come up with a solution for this that would go as many levels deep as necessary on the fly.

Banged my head against the monitor for a while, and finally came up with a set of three functions to replace your one so that the menu can recursively loop through as many levels as there are set up in AC7. However, I still have to think up a way to handle the CA "Look" when the submenus need to be styled differently then the top level of categories; if that's not an issue, the following will do the job nicely.

Replace Conlib/Custom/VerticalMenu.ascx.cs with this:

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)
    {
        buildCatNav();
    }
	private void buildCatNav()
	{
		ComponentArt.Web.UI.MenuItem newItem;
		CategoryCollection topCategories = CategoryDataSource.LoadForParent(0, true);
		foreach (Category topCategory in topCategories)
		{
			newItem = this.CreateItem(topCategory.Name.ToString(), topCategory.NavigateUrl.ToString(), true);
			this.CatNavMenu.Items.Add(newItem);
			this.PopulateSubItem(topCategory, newItem);
		}
	}
	
	private ComponentArt.Web.UI.MenuItem CreateItem(string MenuText, string WebPage, bool expanded)
	{
		ComponentArt.Web.UI.MenuItem thisItem = new ComponentArt.Web.UI.MenuItem();
		thisItem.Text = MenuText;
		thisItem.NavigateUrl = WebPage;
		return thisItem;
	}
	
	private void PopulateSubItem(Category topCategory, ComponentArt.Web.UI.MenuItem thisItem)
	{
		ComponentArt.Web.UI.MenuItem childItem ;
		CategoryCollection childCategories = CategoryDataSource.LoadForParent(topCategory.CategoryId, true);
		foreach (Category childCategory in childCategories)
		{
			childItem = new ComponentArt.Web.UI.MenuItem();
			childItem = this.CreateItem(childCategory.Name.ToString(), childCategory.NavigateUrl.ToString(), true);
			thisItem.Items.Add(childItem);
			this.PopulateSubItem(childCategory, childItem);
		}
	}
}

[jmestep]

There might be more help in the CA documentation-- I remember seeing something, but I can't remember which control it was. CA's online docs aren't too great and I have found more in the docs that come with a demo download of their software, so you might try that. It is the newest version that hasn't been updated in Able, but it still helps.

[rpb3]

OK, so I put this in my Conlib\Custom, tried to use it on a page.

First error I get says Unknown server tag 'ComponentArt:Menu'

so I add this line to the ascx

<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>

Next error says

error CS0117: 'ConLib_Custom_VerticalMenu' does not contain a definition for 'CatNavMenu'

And sure enough, I can't find a definition for that. What am I missing?

UPDATE (I figured it out): For anyone else that has the problem let me save you a few minutes, the verticalmenu.ascx code above has the ID of the ComponentArt:Menu set to "Menu1", changing that to "CatNavMenu" fixed it. I do still need the line above to register the componentart.web.ui, but it works now

[William_firefold]

How does this even work?
I have no idea where the CDATA comes from. I am having trouble styling the menu separately from the drop down. I dont know how to put a class of ID on the menu items.
Is there any sort of documentation for how to use componentart with ABLE?

[mazhar]

You can read online component art documentation. All you need to is to check the documentation part related to desired control and then check its properties that how you can add your own styles.

[jmestep]

I think the component art help documents are really lousy, so I've had to just experiment and check one site against another and their samples to see how to customize.
If you are having problems styling, it could be because of the componentart.css and componentart.skin files in your theme folder. They have some default styles that the menus pull from and since .net looks thru the .css files in alphabetical order, the control would use componentart styles with the same name before it would use yours.

[William_firefold]

I hate to revisit this, but we put the flyout menus online yesterday, and I noticed a bug.
As far as I know, it only happens in firefox 3.0.
if you have it installed, you can see the problem live on FireFold.com. When you click on one of the top level categories, the item you click on pops out to the right and the whole menu gets about 10px smaller on the right side until the page loads.

I just need to know if this is some sort of ASP issue, or if i can fix the problem in my css.
here is my menu code:

Code: Select all

<ComponentArt:Menu id="CatNavMenu" DefaultGroupCssClass="MenuGroup"  DefaultItemLookID="DefaultItemLook" ExpandDelay="100" ImagesBaseUrl="~/App_Themes/firefold/images/"
      EnableViewState="false" Orientation="Vertical" ExpandDirection="Right" Width="200px" runat="server">
    <ItemLooks>
		<ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ActiveCssClass="MenuItemActive" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0" />
		<ComponentArt:ItemLook LookID="Level2ItemLook" CssClass="Level2Item" HoverCssClass="Level2ItemHover" ActiveCssClass="Level2ItemActive" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0"  />
    </ItemLooks>
</ComponentArt:Menu>

Code: Select all

public partial class ConLib_Custom_VerticalMenu : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {buildCatNav();  }
   private void buildCatNav()
   {
      ComponentArt.Web.UI.MenuItem newItem;
      CategoryCollection topCategories = CategoryDataSource.LoadForParent(0, true);
      foreach (Category topCategory in topCategories)
      {
         newItem = this.CreateItem(topCategory.Name.ToString(), topCategory.NavigateUrl.ToString(), true);
            newItem.DefaultSubItemLookId = "Level2ItemLook";
            newItem.SubGroupCssClass = "Level2Group";
         this.CatNavMenu.Items.Add(newItem);
         this.PopulateSubItem(topCategory, newItem);
      }
   }   
   private ComponentArt.Web.UI.MenuItem CreateItem(string MenuText, string WebPage, bool expanded)
   {
      ComponentArt.Web.UI.MenuItem thisItem = new ComponentArt.Web.UI.MenuItem();
      thisItem.Text = MenuText;
      thisItem.NavigateUrl = WebPage;
      return thisItem;
   }   
   private void PopulateSubItem(Category topCategory, ComponentArt.Web.UI.MenuItem thisItem)
   {
      ComponentArt.Web.UI.MenuItem childItem ;
      CategoryCollection childCategories = CategoryDataSource.LoadForParent(topCategory.CategoryId, true);
      foreach (Category childCategory in childCategories)
      {
         childItem = new ComponentArt.Web.UI.MenuItem();
         childItem = this.CreateItem(childCategory.Name.ToString(), childCategory.NavigateUrl.ToString(), true);
         thisItem.Items.Add(childItem);
       //  this.PopulateSubItem(childCategory, childItem);
      }
   }
}

Code: Select all

/* Vertical Menu ***********************/
.MenuGroup{font-family:verdana;width:200px;display:block;position:relative;z-index:100;margin-bottom:10px;border-bottom:2px #a00 solid;overflow:hidden;}
.MenuItem{width:200px;padding:5px 0 5px 5px;overflow:hidden;color:#ddd;font-family:verdana;border-bottom: solid 1px #555;cursor:pointer;}
.MenuItemHover{width:200px;padding:5px 0 5px 5px;background:#555;color:#fff;font-family:verdana;border-bottom: solid 1px #f00;cursor:pointer;overflow:hidden;}
.MenuItemActive{width:200px;font-family:verdana;border-bottom: solid 1px #ddd;cursor:pointer;display:block;background:#888;color:#fff;padding:5px 0 5px 5px;overflow:hidden;}
.Level2Group{cursor:pointer;width:auto;}
.Level2Item{padding:5px;background-color:#555;color:#fff;border-bottom: solid 1px #777;cursor:pointer; -moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;font-weight:bold;background: rgba(85, 85, 85, 0.95);
}
.Level2ItemHover{padding:5px;background-color:#333;color:#fff;border-bottom: solid 1px #a00;cursor:pointer; -moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;font-weight:bold;}
.Level2ItemActive{background-color:#ffffff;color:#807d9f;border-bottom: solid 1px #ebd0bf;border-top:0px;cursor:pointer;padding:5px; -moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;font-weight:bold;}

[rpb3]

I had this same issue but I have not seen it in a while, maybe because I am using Firefox 3.5.2??? Haven't noticed it in any other browsers.

[William_firefold]

Is there any way to make it so you can mousewheel click this type of menu. I really like using tabs, and i dont think im the only one.