| |
| Multiple menus on the same page
|
|
| | |
There are 2 cases with multiple menus on the same page:
- Only one easymenu is visible at the same time in the webpage.
View example.
-
More than one easymenu is visible at the same time in the webpage.
View example.
| | |
If only one easymenu is visible at the same time in the webpage, you can use different styles by simply setting a different StyleFolder property for each EasyMenu.
For example:
<oem:EasyMenu id="Easymenu1" StyleFolder="styles/horizontal1">
<oem:EasyMenu id="Easymenu2" StyleFolder="styles/horizontal2">
| | |
If more than one easymenu is visible at the same time in the webpage, you need to use different css class names for the easymenu items.
To accomplish this you need to use CSSClasses and CSSClassesCollection properties.
More information on these properties you can find in server side documentation page.
For the first easymenu you don't need to do anything.
For the second easymenu on your webpage you need to add CSSClassesCollection property.
Second easymenu on your page has the css class names suffixed by "2".
<oem:EasyMenu id="EasymenuMain" runat="server" ShowEvent="Always"
StyleFolder="styles/style2" Position="Horizontal"
CSSMenu="easyMenu2" CSSMenuItemContainer="easyMenuItemContainer2" Width="330">
<CSSClassesCollection>
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuItem"
ComponentSubMenuCellOver="easyMenuItemSubMenuCellOver2"
ComponentContentCell="easyMenuItemContentCell2" Component="easyMenuItem2"
ComponentSubMenuCell="easyMenuItemSubMenuCell2"
ComponentIconCellOver="easyMenuItemIconCellOver2" ComponentIconCell="easyMenuItemIconCell2"
ComponentOver="easyMenuItemOver2"
ComponentContentCellOver="easyMenuItemContentCellOver2" />
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuSeparator"
ComponentSubMenuCellOver="easyMenuSeparatorSubMenuCellOver2"
ComponentContentCell="easyMenuSeparatorContentCell2" Component="easyMenuSeparator2"
ComponentSubMenuCell="easyMenuSeparatorSubMenuCell2"
ComponentIconCellOver="easyMenuSeparatorIconCellOver2" ComponentIconCell="easyMenuSeparatorIconCell2"
ComponentOver="easyMenuSeparatorOver2"
ComponentContentCellOver="easyMenuSeparatorContentCellOver2" />
</CSSClassesCollection>
<Components>
<oem:MenuItem InnerHtml="Item1" ID="item1" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator1" />
<oem:MenuItem InnerHtml="Item2" ID="item2" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator2" />
<oem:MenuItem InnerHtml="Item3" ID="item3" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator3" />
<oem:MenuItem InnerHtml="Item4" ID="item4" />
</Components>
</oem:EasyMenu>
Also for the second easy menu you need to edit file style.css from the specified style folder by StyleFolder property,
and add to the names of the classes "2".
.easyMenu2
{
background-image: url(margin.gif);
background-repeat: repeat-x; background-position: left bottom;
height: 30px;
padding-left: 1px;
padding-right: 1px;
}
.easyMenuItemContainer2
{
background-image: url(mid.gif);
background-repeat: repeat-x;
}
...
Note
·When all the menus have the visibility set to always then different style folders can be used.
·If the menus don't have the visibility set to always then you need to use the same style folder for all the menus and merge all the
css classes into the same style file.
| | |
| "It is amazing how you guys have the tools that suits our needs to the "T" and I'm really glad to see that these tools are compatible with 3.5 as we would be moving there shortly." |
Ramarao Prahalad |
| Texas Association of School Boards |
| | |
|
|
|
|
