Thread: Vertical Fly Out Menu

Is there a way to have the subcategories flyout, to the right , of the categories when you rollover them? Any help will do.

Yes, We have that style and we called that Vertical Menu.
You can you use this component art to your store site.

Code:

<!-- START VERT MENU -->
                <ComponentArt:Menu id="VertMenu" 
	  ClientScriptLocation="skins/componentart_webui_client/"
	  Orientation="vertical"
	  ScrollingEnabled="true"
      ScrollUpLookId="VertScrollUpItemLook"
      ScrollDownLookId="VertScrollDownItemLook"
      CssClass="VertTopMenuGroup"
      DefaultGroupCssClass="VertMenuGroup"
      DefaultItemLookID="VertDefaultItemLook"
      DefaultGroupItemSpacing="1"
      ExpandDelay="0"
      ExpandDuration="0"
      ExpandSlide="None"
      ExpandTransition="None"
	  CascadeCollapse="false"
	  CollapseDelay="0"
	  CollapseSlide="None"
	  CollapseTransition="None"
      ImagesBaseUrl="skins/skin_1/images/"
      EnableViewState="false"
	  Width="100%"
      runat="server">
    <ItemLooks>
		  <ComponentArt:ItemLook LookId="DefaultItemLook" HoverCssClass="MenuItemHover" LabelPaddingTop="2px" ActiveCssClass="MenuItemDown" LabelPaddingRight="15px" LabelPaddingBottom="2px" ExpandedCssClass="MenuItemDown" LabelPaddingLeft="5px" CssClass="MenuItem" />
    	  <ComponentArt:ItemLook LookId="VertTopItemLook" CssClass="VertTopMenuItem" HoverCssClass="VertTopMenuItemHover" LabelPaddingLeft="4" LabelPaddingRight="4" LabelPaddingTop="0" LabelPaddingBottom="0" />
    	  <ComponentArt:ItemLook LookId="VertDefaultItemLook" CssClass="VertMenuItem" HoverCssClass="VertMenuItemHover" LabelPaddingLeft="4" LabelPaddingRight="4" LabelPaddingTop="0" LabelPaddingBottom="0" />
    	  <ComponentArt:ItemLook LookID="VertScrollUpItemLook" ImageUrl="scroll_up.gif" ImageWidth="15" ImageHeight="13" CssClass="VertScrollItem" HoverCssClass="VertScrollItemH" ActiveCssClass="VertScrollItemA" />
	      <ComponentArt:ItemLook LookID="VertScrollDownItemLook" ImageUrl="scroll_down.gif" ImageWidth="15" ImageHeight="13" CssClass="VertScrollItem" HoverCssClass="VertScrollItemH" ActiveCssClass="VertScrollItemA" />
    </ItemLooks>
    </ComponentArt:Menu>
    <!-- END VERT MENU -->

And the css for that component art is ".VertTopMenuGroup"
find the the comment out (see code below) on your style.css.

Code:

-----------------------------------------------------------------------
 Component Art Vertical Menu Style:
-----------------------------------------------------------------------

Please let me know if you have any issue on vertical menu

Thanks.

I'm having issues with the vertical menu styling. I can change the font weight but not the font size or the font color of a vertical menu where there are three or more levels. I can also change the background-color.

So I have a menu that has three levels below the root. Every item that has at least two levels below it (i.e. has the arrow on it for more options) will not change the font size or color. However, if there are no items with a arrow on them at that level then the font color and size CSS works.

Any ideas at what could be wrong?

How can I convert the flyout vert menu to Version9?

I was able to determine that there must be a problem with the way the menu renders because it was taking a property from the Body CSS style and applying it to the menu. As soon as I removed the Body CSS style the style that I had defined for the menu started working.

Are there any known bugs with the menu? The problem I was having was with template #3.

Add this class to the style sheet

C#/VB.NET Code:


.VertMenuGroup td
{
        font-size:11px;

}