Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Problem with submenu items disappearing

Problem with submenu items disappearing Options
Previous Topic · Next Topic
artsnob
Posted: Tuesday, February 19, 2008 8:56:11 AM
Rank: Newbie
Groups: Member

Joined: 2/18/2008
Posts: 7
I'm just starting with eo menu, and was making good progress. But then, all of a sudden, my submenus disappeared. They're still in the code, but they don't appear any more. I must have changed one setting that I shouldn't have, but I simply can't find what it is. Could somebody please tell me where I made my mistake? For the record, I'm trying to duplicate the look and feel of the menu at this site: Yale Sustainable Food

Here's the code that fails to display the submenus:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test_EO_Menu.aspx.vb" Inherits="Test_EO_Menu" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;</div>
<eo:menu id="Menu1" runat="server" checkiconurl="OfficeCheckIcon" controlskinid="None"
style="z-index: 10; left: 0px; position: absolute; top: 0px" width="90px" ExpandOnClick="EnabledForTopLevelOnly">
<LookItems>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="background-color:#c1d2ee;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;"
ItemID="_TopLevelItem" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;">
<SubMenu CollapseEffect-Duration="150" CollapseEffect-Type="Fade" ExpandEffect-Duration="150"
ExpandEffect-Type="Fade" ItemSpacing="3" LeftIconCellWidth="25" Style-CssText="BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12pt; BORDER-LEFT-COLOR: #999999; LEFT: 100px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #999999; PADDING-BOTTOM: 1px; CURSOR: hand; COLOR: #159014; BORDER-TOP-COLOR: #999999; PADDING-TOP: 1px; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 100px; BACKGROUND-COLOR: white; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #999999">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#c5c2b8;height:1px;margin-left:30px;width:1px;">
</eo:MenuItem>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="background-color:#c1d2ee;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
ItemID="_Default" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
Text-Padding-Right="30">
<SubMenu CollapseEffect-Duration="150" CollapseEffect-Type="Fade" ItemSpacing="3"
LeftIconCellWidth="25" Style-CssText="background-color:#fcfcf9;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:0px;border-left-color:#999999;border-left-style:solid;border-left-width:0px;border-right-color:#999999;border-right-style:solid;border-right-width:0px;border-top-color:#999999;border-top-style:solid;border-top-width:0px;color:#b0a531;cursor:hand;font-family:Verdana;font-size:12pt;font-weight:bold;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;">
</SubMenu>
</eo:MenuItem>
</LookItems>

<TopGroup Orientation="Vertical"><Items>
<eo:MenuItem Text-Html="The Farmer" NormalStyle-CssText="" SubMenuIcon="None">
<SubMenu Style-CssText="color:#b0a531"><Items>
<eo:MenuItem Text-Html="Building Relationships"></eo:MenuItem>
<eo:MenuItem Text-Html="Pricing"></eo:MenuItem>
<eo:MenuItem Text-Html="Post Harvest Handling"></eo:MenuItem>
<eo:MenuItem Text-Html="Packaging"></eo:MenuItem>
<eo:MenuItem Text-Html="Food Safety"></eo:MenuItem>
<eo:MenuItem Text-Html="Liability"></eo:MenuItem>
<eo:MenuItem Text-Html="Success Stories"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="The Chef" SubMenuIcon="None">
<SubMenu Style-CssText="color:#b0a531"><Items>
<eo:MenuItem Text-Html="Seasonal Availability"></eo:MenuItem>
<eo:MenuItem Text-Html="Glossary"></eo:MenuItem>
<eo:MenuItem Text-Html="Finding Farmers"></eo:MenuItem>
<eo:MenuItem Text-Html="Restaurant Websites"></eo:MenuItem>
<eo:MenuItem Text-Html="Building Relationships"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="Resources" SubMenuIcon="None">
<SubMenu Style-CssText="color:#b0a531"><Items>
<eo:MenuItem Text-Html="For Farmers"></eo:MenuItem>
<eo:MenuItem Text-Html="For Food Buyers"></eo:MenuItem>
<eo:MenuItem Text-Html="For Organizers"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="About Us" SubMenuIcon="None">
<SubMenu Style-CssText="color:#b0a531"><Items>
<eo:MenuItem Text-Html="Our History"></eo:MenuItem>
<eo:MenuItem Text-Html="Our Collaborators"></eo:MenuItem>
<eo:MenuItem Text-Html="Lessons Learned"></eo:MenuItem>
<eo:MenuItem Text-Html="Photo Albums"></eo:MenuItem>
<eo:MenuItem Text-Html="Press"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
</eo:menu>
</form>
</body>
</html>
Back to top
 
eo_support
Posted: Wednesday, February 20, 2008 2:38:53 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Sorry about the delay! We looked into your menu defintion and found the problem is caused by the absolute positioning attributes you put in your sub menu style:

<LookItems>
<eo:MenuItem .... ItemID="_TopLevelItem" ....>
<SubMenu Style-CssText=".....POSITION: absolute; TOP: 100px....">
</SubMenu>
</eo:MenuItem>
</LookItems>

You can not absolute position the menu as the position of the sub menu is automatically caculated. If you need to adjust the sub menu's position, you should set the sub menu's OffsetX and OffsetY property.

Please feel free to let us know if you have any more questions.

Thanks
Back to top
 
artsnob
Posted: Thursday, February 21, 2008 11:29:02 AM
Rank: Newbie
Groups: Member

Joined: 2/18/2008
Posts: 7
Thanks for getting back to me. I was afraid that I'd overlooked something really obvious and made myself look clueless to the programming community here. As a rule, I don't ask for assistance unless I feel that I've exhausted all reasonable self-help possibilities.

I'm making progress, but I'm still having problems with the submenus. Could you please cut and paste the code below into a form? I want the submenu to look like the top menu, but with the colors reversed (green for normal, gold for hover on the top menu, vice-versa on the submenu). I can get the colors right, but I don't understand where the different font is coming from. What's more, the menu looks different between the preview, Interenet Explorer, and Firefox. Is this another subtle problem, or have I really overlooked something obvious this time?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test_EO_Menu.aspx.vb" Inherits="Test_EO_Menu" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;
<eo:menu id="Menu1" runat="server"
style="z-index: 10; left: 0px; position: absolute; top: 0px" width="82px">
<LookItems>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="BORDER-RIGHT: 0px solid; PADDING-RIGHT: 5%; BORDER-TOP: 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11pt; PADDING-BOTTOM: 1px; BORDER-LEFT: 0px solid; COLOR: #b0a531; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid"
ItemID="_TopLevelItem" NormalStyle-CssText="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11pt; PADDING-BOTTOM: 1px; COLOR: #159014; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid; FONT-FAMILY: Verdana; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none"
SelectedStyle-CssText="background-color:white;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-right:4px;padding-top:0px;padding-bottom:0px;">
<SubMenu OffsetX="-1" Style-CssText="color:#b0a531;cursor:hand;font-family:verdana;font-size:11px;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="border-bottom-style:none;border-left-style:solid;border-left-width:0px;border-right-style:solid;border-right-width:0px;border-top-style:solid;border-top-width:0px;color:#159014;font-family:Verdana;font-size:11pt;padding-bottom:0px;padding-left:0px;padding-right:4px;padding-top:0px;"
ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 4px; PADDING-LEFT: 0px; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px; COLOR: #b0a531; PADDING-TOP: 0px; FONT-FAMILY: Verdana"
SelectedStyle-CssText="background-color:white;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-width:0px;color:#b0a531;font-family:Verdana;font-size:11pt;padding-left:1px;padding-right:4px;padding-top:0px;"
Text-Padding-Right="30">
<SubMenu OffsetX="-1" Style-CssText="">
</SubMenu>
</eo:MenuItem>
</LookItems>
<TopGroup Orientation="Vertical">
<Items>
<eo:MenuItem Text-Html="The Farmer" SubMenuIcon="None">
<SubMenu>
<Items>
<eo:MenuItem Text-Html="Building Relationships"></eo:MenuItem>
<eo:MenuItem Text-Html="Pricing"></eo:MenuItem>
<eo:MenuItem Text-Html="Post Harvest Handling"></eo:MenuItem>
<eo:MenuItem Text-Html="Packaging"></eo:MenuItem>
<eo:MenuItem Text-Html="Food Safety"></eo:MenuItem>
<eo:MenuItem Text-Html="Liability"></eo:MenuItem>
<eo:MenuItem Text-Html="Success Stories"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="The Chef" SubMenuIcon="None">
<SubMenu>
<Items>
<eo:MenuItem Text-Html="Seasonal Availability"></eo:MenuItem>
<eo:MenuItem Text-Html="Glossary"></eo:MenuItem>
<eo:MenuItem Text-Html="Finding Farmers"></eo:MenuItem>
<eo:MenuItem Text-Html="Restaurant Websites"></eo:MenuItem>
<eo:MenuItem Text-Html="Building Relationships"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="Resources" SubMenuIcon="None">
<SubMenu>
<Items>
<eo:MenuItem Text-Html="For Farmers"></eo:MenuItem>
<eo:MenuItem Text-Html="For Food Buyers"></eo:MenuItem>
<eo:MenuItem Text-Html="For Organizers"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Text-Html="About Us" SubMenuIcon="None">
<SubMenu>
<Items>
<eo:MenuItem Text-Html="Our History"></eo:MenuItem>
<eo:MenuItem Text-Html="Our Collaborators"></eo:MenuItem>
<eo:MenuItem Text-Html="Lessons Learned"></eo:MenuItem>
<eo:MenuItem Text-Html="Photo Albums"></eo:MenuItem>
<eo:MenuItem Text-Html="Press"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
</eo:menu>
&nbsp;<br />
</div>
</form>
</body>
</html>

Thanks again. I like what I see with your product, and feel confident that I'll be using it extensively once I get over a couple of coneptual hurdles.

JL
Back to top
 
eo_support
Posted: Thursday, February 21, 2008 12:07:36 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
artsnob wrote:
I want the submenu to look like the top menu, but with the colors reversed (green for normal, gold for hover on the top menu, vice-versa on the submenu). I can get the colors right, but I don't understand where the different font is coming from.


A number of settings affect how menu items looks. You can go over them one by one:

1. _TopLevelItem.NormalStyle.ForeColor (The easiest way to check this is to go to Menu Builder, then expand "Look Items" on the left side TreeView, then click "_TopLevelItem", then expand "NormalStyle" property). Here you have ForeColor set to "#159014". This is correct. The setting gives top level items green color;

1. _TopLevelItem.SubMenu.Style. This settings specifies the default text color for direct sub menu items of top level items. There you have the fore color set to #B0A531. This is wrong;

2. _Default.NormalStyle.ForeColor. This is another place where item's fore color can be specified. You also have the fore color set to #B0A531, this is also wrong;

Usually text colors are set through one of the item style properties (NormalStyle, HoverStyle, etc), so it is unnecessary to set it on SubMenu.Style (unless you want do not set the color on item style properties, which means the same style for all state: normal, hover, etc. That would render the menu useless). Thus to achieve your design, you should:

1. Clear _TopLevelItem.SubMenu.Style.ForeColor;
2. Correct _Default.NormalStyle.ForeColor;

Hope this clarifies the color issue. You would need to apply the same logic for other states, such as hover color, etc.

artsnob wrote:
What's more, the menu looks different between the preview, Interenet Explorer, and Firefox. Is this another subtle problem, or have I really overlooked something obvious this time?


I can see two problems in your menu defintion:

1. Each sub menu by default has a 3 pixel shadow. The shadow would look strange on IE if your sub menu is transparent because IE applies the shadow not only on the sub menu frame, but also on all the text. To avoid this problem, you can either give the sub menu a solid background color, or set the sub menu's shadow depth to 0.

a. To give the sub menu a solid background color, you can set _TopLevelItem.SubMenu.BackColor to the color you like, for example "White";
b. To clear the sub menu shadow, set _TopLevelItem.SubMenu.ShadowDepth to 0;

2. Your menu automatically stretches all the way to the right edge of the page. This is caused by
"PADDING-RIGHT: 5%" in your _TopLevelItem.HoverStyle.CssText. "5%" is not a valid value and it screws up everything else. You probably wanted it to be "5px".

When you try to achive a certain design or to troubleshoot a problem, usually it's easier if you switch to HTML view and try to cut the look items out. Try to cut them all out first, then try to cut a piece out a time. That way you will be able to quickly find out which look item/look item property gives you the result that you wanted/unwanted.

Hope this helps!
Back to top
 
artsnob
Posted: Friday, February 22, 2008 1:24:28 PM
Rank: Newbie
Groups: Member

Joined: 2/18/2008
Posts: 7
Thank you for your timely and very useful assistance. There's definitely a learning curve with all of the features this control contains, but it's worth the effort.

Thanks to your help, I'm now 99% of the way completed on my project to duplicate the menu at this site: desired menu. The only thing I can't do is erase the line between the hover item on the top menu and the submenu associated with it. I tried setting the submenu offsets at -1 and -1, so that the top and left of the submenu would align with the associated item in the top group, and then set the right border of the top menu hover item to a white line to match the background, but this didn't work. It seems that the top menu is at a lower depth than the submenu, and thus the submenu's left border is on top of top menu's whited-out right border.

Is there some way to overcome this problem with settings, or does it have to be done with programming?
Back to top
 
eo_support
Posted: Friday, February 22, 2008 1:43:37 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You are almost there. The child menu is indeed placed higher than the top menu. There are a number of ways to do this, one way is to use different look items. The look items that you have been playing with, such as "_Default", "_TopLevelItem", etc, are built-in look items. In addition to that, you can create your own look items. For example, you can create a look item called "first_child_item".

The main difference between the built-in look items and custom look items is, the built-in looks are applied automatically. For example "_TopLevelItem" is automatically applied to all top level items. With custom look items, you can apply them in whatever way you want using a menu item's LookID property. In your case, you can create a look item called "first_child_item" (the name does not matter), set that item to have a different styles (in your case, it would have a white left border) and then set the first item's LookID to that look item. Obviously you would also need to set all other item's left border to black, you can do that through another look item or the _Default look item.

Using this method means you intend to take care of the left border on the item itself, not on the sub menu. So you will want to clear the left border in _TopLevelItem.SubMenu.Style and _Default.SubMenu.Style (if you previously have border settings there). You will also want to make sure ItemSpacing is set to 0, so that you don't have any gaps between items, otherwise you will see segmented left border.

Let us know if you have more questions.

Thanks
Back to top
 
artsnob
Posted: Saturday, February 23, 2008 5:17:03 PM
Rank: Newbie
Groups: Member

Joined: 2/18/2008
Posts: 7
Excellent help ... I was finally able to duplicate the exact look of the menu someone wanted me to copy. I think I'm over the conceptual challenge of the design elements. Thanks for your patient guidance.

I do have one more question. Could you please check out that target menu one more time? It's at this site. Notice what happens when you choose an item on a submenu: suddenly the current submenu becomes a slide menu, while all the other submenus continue to behave as before. Can something like this be done with your product? If so, are there any code samples or articles you can point me to? I don't expect your to write anything for me, but I'd like to know if something like this IS possible before I invest too much time pursuing what may be a fruitless quest
Back to top
 
eo_support
Posted: Sunday, February 24, 2008 6:41:06 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You won't be able to do that with one menu. However it is possible to implement that with multiple menus and some coding. You can use one menu instance for each top menu item, then place HTML blocks in between them for the slide menu sub menus (you would just use regular HTML link, not slide menu to implement them) and then dynamically show/hide these blocks according to the which item was selected. Nevertheless, it can get quite complicated, so I am not sure whether it's worth the effect.

Thanks
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.