ASP.NET Easy Menu - How to customize your menu using CSS

The CSS file style.css is located according property StyleFolder
Example: oem.StyleFolder = "Styles/Windows"

If property FolderStyle is not set, default location is 'Styles/style.css'.



Style classes correspondence


easyMenu

Represents the outer-most element of the Easy Menu. It is the element that holds the container for all the items of the menu.
Example:
.easyMenu {
    border: 1px solid #D4D0C8;
    background-color: #D4D0C8;
}
						

easyMenuItemContainer

It is the element that contains all the items of the menu.
Example:
.easyMenuItemContainer {
    border: 1px solid #000000;
}
						

easyMenuItem / easyMenuItemOver

It is the element representing the MenuItem. If the menu uses icons, it acts as a container for both the icon and the content of the item (take a look at easyMenuItemIconCell and easyMenuItemContentCell classes).

TIP: if you want to customize the way links are displayed inside your item, you should define a css-class named .easyMenuItem A / .easyMenuItemOver A
Example:
.easyMenuItem {
    font-family: Verdana;
    font-size: 11px;
    background-color: gray;
}
.easyMenuItemOver {
    font-family: Verdana;
    font-size: 11px;
    background-color: yellow;
}
						

easyMenuItemIconCell / easyMenuItemIconCellOver

It is the element that holds the Icon of the MenuItem (if the item has an Icon and if the Menu is set to use icons).

TIP: if you want to customize the way links are displayed inside this element, you should define a css-class named .easyMenuItemIconCell A / .easyMenuItemIconCellOver A
Example:
.easyMenuItemIconCell {
    text-align: center;
    width: 20px;
}
.easyMenuItemIconCellOver {
    text-align: center;
    width: 20px;
}
						

easyMenuItemLeftRoundCornerCell / easyMenuItemLeftRoundCornerCellOver

It is the element that holds the left rounded corner of the MenuItem.

Example:
.easyMenuItemLeftRoundCornerCell {
    width: 12px;
    background-image: url(roundcorner_left.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.easyMenuItemLeftRoundCornerCellOver {
    width: 12px;
    background-image: url(roundcorner_left_over.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
						

easyMenuItemContentCell / easyMenuItemContentCellOver

It is the element that holds the content of the MenuItem (the InnerHtml or controls inside the item).

TIP: if you want to customize the way links are displayed inside this element, you should define a css-class named .easyMenuItemContentCell A / .easyMenuItemContentCellOver A
Example:
.easyMenuItemContentCell {
    font-family: Tahoma;
    font-size: 11px;
    text-decoration: none;
}
.easyMenuItemContentCellOver {
    font-family: Tahoma;
    font-size: 11px;
    text-decoration: underline;
}
						

easyMenuSeparator / easyMenuSeparatorOver

It is the element that represents the MenuSeparator. If the menu uses icons, it acts as a container for both the icon and the content of the separator (take a look at easyMenuSeparatorIconCell and easyMenuSeparatorContentCell classes).

TIP: if you want to customize the way links are displayed inside this element, you should define a css-class named .easyMenuSeparator A / .easyMenuSeparatorOver A
Example:
.easyMenuSeparator {
    height: 3px;
    font-size: 1px;
    background-color: red;
}
.easyMenuSeparatorOver {
    height: 3px;
    font-size: 1px;
    background-color: yellow;
}
						

easyMenuSeparatorIconCell / easyMenuSeparatorIconCellOver

It is the element that holds the Icon of the MenuSeparator (if it has an Icon and if the menu uses icons).

TIP: if you want to customize the way links are displayed inside this element, you should define a css-class named .easyMenuSeparatorIconCell A / .easyMenuSeparatorIconCellOver A
Example:
.easyMenuSeparatorIconCell {
    width: 20px;
}
.easyMenuSeparatorIconCellOver {
    width: 20px;
}
						

easyMenuSeparatorContentCell / easyMenuSeparatorContentCellOver

It is the element that holds the content of the MenuSeparator (the InnerHtml or controls insite the item).

TIP: if you want to customize the way links are displayed inside this element, you should define a css-class named .easyMenuSeparatorContentCell A / .easyMenuSeparatorContentCellOver A
Example:
.easyMenuSeparatorContentCell {
    font-family: Verdana;
    font-weight: bold;
}
.easyMenuSeparatorContentCellOver {
    font-family: Verdana;
    font-weight: normal;
}
						

easyMenuItemSubMenuCell / easyMenuItemSubMenuCellOver

it is the element that when displayed shows that the MenuItem has a submenu.
Example:
.easyMenuItemSubMenuCellOver {
    width: 10px;
    padding: 2px;
    background-image: url('submenu.gif');
}
.easyMenuItemSubMenuCellOverOver {
    width: 10px;
    padding: 2px;
    background-image: url('submenuover.gif');
}
						

easyMenuItemRightRoundCornerCell / easyMenuItemRightRoundCornerCellOver

It is the element that holds the right rounded corner of the MenuItem.

Example:
.easyMenuItemRightRoundCornerCell {
    width: 12px;
    background-image: url(roundcorner_right.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.easyMenuItemRightRoundCornerCellOver {
    width: 12px;
    background-image: url(roundcorner_right_over.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
						

obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 79
Appearance - 11
Live Styles
Horizontal Right To Left
Transparent - over flash
MSDN 2
With rounded corners
Keep Open New
Expand Animations New
Vertical 1
MS Vertical
Vertical Right To Left
Context Menu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
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
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
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
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
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
ChangeLog
Tutorials - 2
Using Database
Postback Persistance