Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Web Menu: Submenu goes out of the controol Options
Juanster
Posted: Friday, July 31, 2009 11:59:33 AM
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
eo_support
Posted: Friday, July 31, 2009 12:04:53 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 21,292
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!
Juanster
Posted: Friday, July 31, 2009 12:08:38 PM
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.
eo_support
Posted: Friday, July 31, 2009 12:17:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 21,292
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_tabs2

You can load the full sample source project in Visual Studio and run it locally to see how it works.

Thanks!
Juanster
Posted: Friday, July 31, 2009 12:23:50 PM
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....?
eo_support
Posted: Friday, July 31, 2009 12:56:42 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 21,292
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!
Juanster
Posted: Friday, July 31, 2009 1:07:27 PM
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...?
eo_support
Posted: Friday, July 31, 2009 1:54:41 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 21,292
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!


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.