|
|
Rank: Newbie
Groups: Member
Joined: 9/11/2009
Posts: 3
|
Hi
I just bought Menu and I'm trying to implement the CSS scheme of our site with run time databinding. I'm migrating from a competitor's menu bar so I know the scheme works for it. I'm not a css expert but I think I know what I'm doing. I am having huge problems trying to make it work. I've been trying for several hours now and I'm tired and frustrated :-)
As a test, I have a linked css file which has the classes:
.NavigationTextOver
{
color: white;
text-decoration: none;
background-color: #cb99cc;
}
.NavigationTextOut
{
color: White;
text-decoration: none;
background-color: #492549;
}
I have the menu bar defined in a ascx control:
<eo:menu id="Menu1" ControlSkinID="None" Width="100%" runat="server" TopLevelItemAlign="None">
<LookItems>
<eo:MenuItem HoverStyle-CssClass="NavigationTextOver"
ItemID="_Default" NormalStyle-CssClass="NavigationTextOut"
Text-HorizontalAlign="Center"></eo:MenuItem>
</LookItems>
<TopGroup Style-CssText="border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-width:0px;">
</eo:menu>
I can set page elements or control elements to the css classes above and they work no problem.
In the code behind I have this binding data:
DataSet ds=BOLC.PageContentBOLC.GetNavigationActive(this.WebTemplateUrl);
DataRelation dr=null;
try
{
dr=ds.Relations.Add("MenuItemHierarchy",ds.Tables[0].Columns["ID"],ds.Tables[0].Columns["ParentID"]);
dr.Nested=true;
}
catch(Exception e)
{
}
this.Menu1.DataSource=ds;
EO.Web.DataBinding db=new EO.Web.DataBinding();
db.Property="Text-Html";
db.DataField="Link";
this.Menu1.Bindings.Add(db);
this.Menu1.DataBind();
As you can see, its a very simple scheme....the links should be white with no underline and the background color of the cell changes color on mouse over. As is, the css classes have NO effect. The links are blue with underlines and there is no background color at all.
I switched to inline css styles like so:
<eo:menu id="Menu1" ControlSkinID="None" Width="100%" runat="server" TopLevelItemAlign="None">
<LookItems>
<eo:MenuItem HoverStyle-CssText="color: White;text-decoration: none;background-color: #cb99cc;"
ItemID="_Default" NormalStyle-CssText="color: White;text-decoration: none;background-color: #492549;"
Text-HorizontalAlign="Center"></eo:MenuItem>
</LookItems>
<TopGroup Style-CssText="border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-width:0px;">
</eo:menu>
With this, the background colors are correct, but the links still are blue with underlines! What is interesting is in 2 browsers, IE and Firefox, it appears as described with either css class or inline, but if I view with the menu builder in visual studio, it looks correct!
I added another menu object and used a skin from the menu builder:
<eo:Menu id="Menu2" ControlSkinID="None" Width="300px" runat="server">
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#F7B00A;padding-left:5px;padding-right:5px;" ItemID="_TopLevelItem"
NormalStyle-CssText="padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 3px; border-top: #e0e0e0 1px solid; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #5f7786; padding-top: 3px; border-bottom: #e0e0e0 1px solid; font-family: arial; background-color: #f7f8f9"
OffsetX="-3" ShadowDepth="0" OffsetY="3" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
<eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="width: 1px; height: 1px; background-color:#e0e0e0;"></eo:MenuItem>
<eo:MenuItem HoverStyle-CssText="color:#F7B00A;padding-left:5px;padding-right:5px;" ItemID="_Default"
NormalStyle-CssText="padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 3px; border-top: #e0e0e0 1px solid; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #5f7786; padding-top: 3px; border-bottom: #e0e0e0 1px solid; font-family: arial; background-color: #f7f8f9"
OffsetX="3" ShadowDepth="0" OffsetY="-4" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
</LookItems>
<TopGroup Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 10px; border-top: #cb3e00 2px solid; padding-left: 10px; font-size: 12px; background-image: url(00020005); padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #5f7786; padding-top: 3px; font-family: arial">
</TopGroup>
</eo:Menu>
The links on this menu aren't blue nor have the underline. I looked through the inline css from menu builder and I can't figure out how it is doing that. There is no text-decoration....am I missing something? How is menu builder making those links with out underlines or the blue color?
I really need to do as much of this as possible in the code behind. Our site is such that depending on what page you are on, the color scheme must change on the navigation. Are these issues due to the fact that there are things both at run time and design time?
Any help appreciated!
Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thank you very much for your business. Your code looks fine to us. The only part that we think that may have confused you is, our menu items are NOT html links. So generally, when you supply menu item text, you just supply the text as is. You do not have to create a HTML link element. If you need the menu to navigate to somewhere when clicked, you would set the menu item's NavigateUrl property.
We tried your code with a few fixed menu items and it works fine. So you may want to try that first. That should tell you whether it has to do with your database contents or not. If the problem still occurs, please try to isolate the problem into a test page. Once we have that we will try to run it here. It should not be difficult for us to tell you what's wrong as soon as we can see the problem.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 9/11/2009
Posts: 3
|
Hi! Thanks for the quick reply! I think your software is great, I just have a very limited amount of time to learn it and get it running in our production environment :-)
I understand what you are saying about the menu item and navigationurl property. I guess I was unsure how to do that with this code since I'm not instantiating a menuitem object...:
this.Menu1.DataSource=ds;
EO.Web.DataBinding db=new EO.Web.DataBinding();
db.Property="Text-Html";
db.DataField="Link";
this.Menu1.Bindings.Add(db);
this.Menu1.DataBind();
I was able to get the css classes working for the background color change...user error - oops. I should learn to give up and go to sleep sooner.
I was also able to get the formatting/styling of the hyperlinks working as required though. Along with some other info, I passed in the name of the css class to a stored proc, had it generate the html for the hyperlinks with css class and then passed it back to the app so that it was bound to the datafield property. I'm sure there is a better way without (like you said) having the app generate the html hyperlink. But for now, its working!
If you can tell me how to use a menuitem object and navigationurl with the databinding that I'm using above, I will give it a shot. I'd very much like to not hard code html...
Thanks!!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, I think the key is you should NOT generate the hyperlinks. You would simply bind your text into Text-Html and href into NavigateUrl. See here for a working example: http://demo.essentialobjects.com/Default.aspx?path=Menu\menu_programming\_i0\binding_datasetYou never need to create a hyperlink anywhere because the menu does not use hyperlinks for navigation. Thanks
|
|
Rank: Newbie
Groups: Member
Joined: 9/11/2009
Posts: 3
|
OHH I get it now...In the example, I thought "NavigateUrl" was a table field and not a class property. Now it makes sense, although maybe a constant class element would make more sense? Like db.Property=MenuItem.Constants.NavigateUrl; instead of a text string? Just a thought.... It is working now just as you describe. Thanks!!!
|
|