ASP.NET Easy Menu - Multiple menus on the same page - Horizontal menu and Tab Strip

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

 

Download Download this working example.


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;
        }
        
        ...        

"Your help has been amazing, and I really appreciate your quick response. My project looks and works much better because of it! Thank you!"

Kelvin

obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 47
Horizontal - 15
Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5
Horizontal 6
Horizontal 7
Horizontal 8
Horizontal Right To Left
Transparent - over flash
Transparent - over iframe
MSDN
MSDN 2
With rounded corners
Keep Open New
Vertical - 3
Vertical 1
MS Vertical
Vertical Right To Left
ContexMenu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 20
Tab Strip
Tab Strip - With postback New
Different Styles - 14
TabStrip1
TabStrip2
TabStrip3
TabStrip4
TabStrip5
TabStrip6
TabStrip7
TabStrip8
TabStrip9
TabStrip10
TabStrip11
TabStrip12
Yahoo TabStrip
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker
Features - 46
Fast loading time
Multi Column Menu - 2
Multi Column Submenu New
Multi Column Submenu with Icons New
Multiple menus - 3
Multiple menus
Multiple menus 2
Horizontal menu and Tab Strip
Operations - 9
ShowEvent New
Add / Remove Items New
Hide / Show Items New
Menu item inner HTML New
Attach / Detach
Menu Events
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
Integration  - 13
TreeView - 5
Attach to TreeView
Dynamic Loading
Inside callback panel
Select the TreeView node New
TreeView inside Easy Menu
AJAX Page - 3
Inside AJAX Page panel
Inside MS AJAX panel
Add items server side
Grid - 2
Use With Grid
Inside DataGrid column
Inside WindowNew
Build from SiteMap
Over Java Applet New
Other features - 15
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
Custom Menu Items
Using Database
Postback Persistance
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 2
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
ChangeLog