obout inc - ASP.NET EasyMenu - Tutorials - Multiple menus on the same page

Multiple menus on the same page - Horizontal menu and TabStrip

If more than one EasyMenu 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.

EasyMenu - Horizontal

EasyMenu - TabStrip

Download this working example.

For the first EasyMenu 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 EasyMenu on your webpage you need to add CSSClassesCollection property.
Second EasyMenu 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 EasyMenu 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;
        }

        ...

Please visit HOW-TO and Help page for any questions.

"Keep up the great development; you guys are true heroes in the world wild web of .NET programming!"

Maurice Battle