obout inc - ASP.NET EasyMenu - Tutorials

How to customize your menu using CSS

Open the CSS style file in any text editor (e.g. Notepad). Feel free to edit.

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

Here's how the styles are applied to the menu:

	easyMenu
	easyMenuItemContainer
	easyMenuItem / easyMenuItemOver
	easyMenuItemIconCell / easyMenuItemIconCellOver
	easyMenuItemLeftRoundCornerCell / easyMenuItemLeftRoundCornerCellOver New!
	easyMenuItemContentCell / easyMenuItemContentCellOver
	easyMenuSeparator / easyMenuSeparatorOver
	easyMenuSeparatorIconCell / easyMenuSeparatorIconCellOver
	easyMenuSeparatorContentCell / easyMenuSeparatorContentCellOver
	easyMenuItemSubMenuCell / easyMenuItemSubMenuCellOver
	easyMenuItemRightRoundCornerCell / easyMenuItemRightRoundCornerCellOver New!

Note: the styles that end in Over are applied to the element when the mouse hovers it.

easyMenu

Represents the outer-most element of the EasyMenu. 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 New!

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

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

"I was astounded by how easy and stylish your products were."

Kevin Klika