|
Rank: Newbie Groups: Member
Joined: 7/31/2009 Posts: 4
|
I have a 2 level menu. Both, the main level and the submenu are horizontal menus. I'm working with a web page that has 900px width. When I have a big submenu it goes out of the div.
1. Is there a way to show all the submenus at the lefft side of the menu? 2. If not, is there a way that the menu shows the submenues within the limits of the control? I mean, changes from "left to right " to "right to left"...
The menu is doing that when I resize the whole browser...
Thanks
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
You may want to change the sub menu's OffsetX value. You can give it a negative value to move it towards to the left or a positive value to move it towards the right. In order to change the value, you can bring up Menu Builder, select the top level item, then click "Sub Menu" on the right, then modify OffsetX property from the property Grid.
Thanks!
|
|
Rank: Newbie Groups: Member
Joined: 7/31/2009 Posts: 4
|
Yes, but the problem is the menu is binding from SiteMap Datasource and the sitemap depends on resources and I have several languages, so the menu items widths are different. I need something to set it automatically.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, In that case it might be better for you to use two separate menus. Both menus are "top level" menu bars and you will be able to precisely control where they appear, but they are wired together with JavaScript so that they appears as a single menu. Here is a sample demonstrates how to do that: http://demo.essentialobjects.com/Default.aspx?path=Menu\menu_programming\_i2\red_tabs2You can load the full sample source project in Visual Studio and run it locally to see how it works. Thanks!
|
|
Rank: Newbie Groups: Member
Joined: 7/31/2009 Posts: 4
|
Ok, so it's impossible this way....
But, how can I make every menu read from different part of the SiteMap?
The first one has to read only the root level, that's easy, but the other ones have to read each one from each 2nd level of the SiteMap....?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, The easiest way is probably to create a full menu (this will be the top menu) from your site map first, then use code to dynamically create and populate child menu based on items from the top menu. Below is the code to do it:
Code: C#
private void InitChildMenus(EO.Web.Menu topMenu)
{
//Dynamically creates child menus based on top menu
for (int i = 0; i < topMenu.Items.Count; i++)
InitChildMenu(topMenu.Items[i].SubMenu);
}
private void InitChildMenu(EO.Web.MenuGroup subMenu)
{
//Create a new menu
EO.Web.Menu childMenu = new EO.Web.Menu();
//Initialize the appearance setting for the new menu
//For demonstrating purpose, this code gets the appearance
//settings from one of the built-in template. If you have
//customized settings, you will need to duplicate them all
//here with code.
childMenu.ControlSkinID = "Office2003";
//Add the child menu into the page
childMenuPanel.Controls.Add(childMenu);
//Copy menu items from the top menu to the child menu
InitChildMenu(subMenu, childMenu.TopGroup);
//Clear child items for the top menu
subMenu.Items.Clear();
}
private void InitChildMenu(
EO.Web.MenuGroup sourceGroup, EO.Web.MenuGroup targetGroup)
{
//Copy menu items from sourceGroup to targetGroup
for (int i = 0; i < sourceGroup.Items.Count; i++)
{
//Copy the menu item
EO.Web.MenuItem sourceItem = sourceGroup.Items[i];
EO.Web.MenuItem item = new EO.Web.MenuItem();
item.Text = sourceItem.Text;
item.IsSeparator = sourceItem.IsSeparator;
targetGroup.Items.Add(item);
//Recursively copy child items
InitChildMenu(sourceItem.SubMenu, item.SubMenu);
}
}
Once you have that, you can then call the following code in your Page_Load:
Code: C#
//Create a full top menu from your site map
topMenu.DataBind();
//Initialize child menus based on the top menu
InitChildMenus(topMenu);
Please let us know if this works for you. Thanks!
|
|
Rank: Newbie Groups: Member
Joined: 7/31/2009 Posts: 4
|
Thanks....now I have all the menus created dinamically...
How can I use the Javascript now since I don't have divs...?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, You can just extend the code to create an additional Panel outside of each child menu:
Code: C#
//Create a new menu
EO.Web.Menu childMenu = new EO.Web.Menu();
//Create a new Panel to host the menu, this is the equivalent of the DIV
//element in the sample
Panel panel = new Panel();
//Add both into the page
childMenuPanel.Controls.Add(panel);
panel.Controls.Add(childMenu);
//Store the panel's ClientID into the parent item's (this is the top
//level item)'s Value property. This property is being used by the
//client side JavaScript to show/hide the menu
subMenu.ParentItem.Value = panel.ClientID;
You also need to change the client side JavaScript as follow:
Code: JavaScript
if (g_curSelectedItem)
{
....
}
else
{
//The original code hides "divConsumer", since we no longer
//use hardcoded div ID, we will need to get the ID from the
//first top level item's value property
var topMenu = eo_GetObject("topMenu");
var topGroup = topMenu.getTopGroup();
var firstTopMenuItem = topGroup.getItemByIndex(0);
var divId = firstTopMenuItem.getValue();
//Hide it
document.getElementById(divId).style.display = "none";
}
Hope this helps. Thanks!
|
|