If
more than one Easy Menu is visible at the same time in a webpage, you need to use different css class names for the 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.
Easy Menu - Horizontal
|
Easy Menu - Tab Strip
|
For the first Easy Menu you don't need to do anything.
<oem:EasyMenu id="Horizontal1" runat="server" ShowEvent="Always" StyleFolder="/em/emstyles/styles/TSH_Horizontal" Position="Horizontal" Width="330"> ...
For the second Easy Menu on your webpage you need to add CSSClassesCollection property.
Second Easy Menu on your page has the css class names prefixed by "TabStrip".
<oem:EasyMenu id="TabStrip1" runat="server" ShowEvent="Always" Width="330" StyleFolder="/em/emstyles/styles/TSH_TabStrip" Position="Horizontal" CSSMenu="TabStripMenu" CSSMenuItemContainer="TabStripItemContainer"> <CSSClassesCollection> <oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuItem" Component="TabStripItem" ComponentOver="TabStripItemOver" ComponentContentCell="TabStripItemContentCell" ComponentContentCellOver="TabStripItemContentCellOver" ComponentLeftRoundCornerCell="TabStripItemLeftRoundCornerCell" ComponentLeftRoundCornerCellOver="TabStripItemLeftRoundCornerCellOver" ComponentRightRoundCornerCell="TabStripItemRightRoundCornerCell" ComponentRightRoundCornerCellOver="TabStripItemRightRoundCornerCellOver" /> </CSSClassesCollection> ...
Also for the second Easy Menu you need to edit file style.css from the specified style folder by StyleFolder property,
and prefix the names of the classes with "TabStrip".
.TabStripItemContentCell
{
font-family: Tahoma;
font-size: 11px;
color: #666666;
text-align: center;
white-space: nowrap;
background-image: url(roundcorner_mid.jpg);
background-repeat: repeat-x;
}
...