Easy Menu - Knowledge Base

« Back to Knowledge Base list

Use different styles for multiple Easy Menu on the same page


How can I use different styles for multiple Easy Menu on the same page?


If only one easymenu is visible at the same time you can do this bysimply setting a different StyleFolder property for each Easy Menu.

For example:
<oem:EasyMenu id="Easymenu1" StyleFolder="/emstyles/styles/horizontal1">
<oem:EasyMenu id="Easymenu2" StyleFolder="/emstyles/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 example:

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 "_1".

<oem:EasyMenu id="EasymenuMain" runat="server" ShowEvent="Always" StyleFolder="/emstyles/styles/example_1"
Position="Horizontal" CSSMenu="ParentMenu_1" CSSMenuItemContainer="ParentItemContainer_1" Width="330">
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuItem"
ComponentContentCell="ParentItemContentCell_1" Component="ParentItem_1"
ComponentIconCellOver="ParentItemIconCellOver_1" ComponentIconCell="ParentItemIconCell_1"
ComponentOver="ParentItemOver_1" ComponentContentCellOver="ParentItemContentCellOver_1" />
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuSeparator"
ComponentContentCell="ParentSeparatorContentCell_1" Component="ParentSeparator"
ComponentIconCellOver="ParentSeparatorIconCellOver_1" ComponentIconCell="ParentSeparatorIconCell_1"
ComponentContentCellOver="ParentSeparatorContentCellOver_1" />
<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" />

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 "_1".

background-image: url(/emstyles/styles/horizontal1/margin.gif);
background-repeat: repeat-x; background-position: left bottom;
height: 30px;
padding-left: 1px;
padding-right: 1px;

background-image: url(/emstyles/styles/horizontal1/mid.gif);
background-repeat: repeat-x;


See also: Use more than one Easy Menu on the page but only the last one added is rendered.
obout.com Home
Easy Menu Home 
Easy Menu Home
Site Map
Compare with Text Menu
Examples - 79
Appearance - 11
Live Styles
Horizontal Right To Left
Transparent - over flash
With rounded corners
Keep Open New
Expand Animations New
Vertical 1
MS Vertical
Vertical Right To Left
Context Menu - 10
World Map
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 8
Tab Strip
Live Styles
Tab Strip - With postback New
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker - 1
Time Picker
Populating with data - 5
Binding to DataReader New
Binding to DataTable New
Binding to SqlDataSource New
Binding to ObjectDataSource New
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
Menu item postback
Show menu New
Align/Position - 4
Advanced Align
Menu Offsets
Integration  - 14
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
With Data Controls New
Other features - 12
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 1
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
Tutorials - 2
Using Database
Postback Persistance