您的位置：首页 > 其它

How to change height of RadMenu (Sprite Image)

2011-11-11 14:24 323 查看

example: http://www.telerik.com/help/aspnet-ajax/menu-change-height.html

example: http://www.telerik.com/help/aspnet-ajax/combobox-appearance-change-height-input-element.html

tutorial: http://www.w3schools.com/css/css_image_sprites.asp

tutorial: http://www.lightpostcreative.com/image-sprites-tutorial/

Demo:

"rmSprite.png" Image

1) Original

2) Custom

Related CSS

/*Font*/
.RadMenu .rmHorizontal .rmText
{
padding: 0 12px 1px 0;
}
.RadMenu_CustomSkin,
.RadMenu_CustomSkin a.rmLink
{
font: normal 22px/23px "Segoe UI", Arial, sans-serif;
color: #000;
text-decoration: none;
}

/*Root Item Focus "rmSprite.png" Image Position*/
.RadMenu_CustomSkin a.rmLink:hover,
.RadMenu_CustomSkin a.rmFocused,
.RadMenu_CustomSkin a.rmSelected
{
background-position: 0 -72px;
}

.RadMenu_CustomSkin a.rmLink:hover .rmText,
.RadMenu_CustomSkin a.rmFocused .rmText,
.RadMenu_CustomSkin a.rmSelected .rmText
{
background-position: 100% -96px;
}

/*Root Item Expand "rmSprite.png" Image Position*/
.RadMenu_CustomSkin a.rmExpanded,
.RadMenu_CustomSkin a.rmExpanded:hover
{
background-position: 0 -278px;
}

.RadMenu_CustomSkin a.rmExpanded .rmText,
.RadMenu_CustomSkin a.rmExpanded:hover .rmText
{
background-position: 100% -351px;
}

/*Sub Item Focus "rmSprite.png" Image Position*/
.RadMenu_CustomSkin .rmGroup a.rmLink:hover,
.RadMenu_CustomSkin .rmGroup a.rmFocused,
.RadMenu_CustomSkin .rmGroup a.rmSelected,
.RadMenu_CustomSkin .rmGroup a.rmExpanded
{
background-position: 0 -168px;
}

.RadMenu_CustomSkin .rmGroup a.rmLink:hover .rmText,
.RadMenu_CustomSkin .rmGroup a.rmFocused .rmText,
.RadMenu_CustomSkin .rmGroup a.rmSelected .rmText,
.RadMenu_CustomSkin .rmGroup a.rmExpanded .rmText
{
background-position: 100% -192px;
}
/*Menu Background "rmSprite.png" Image Position*/
.RadMenu_CustomSkin .rmRootGroup
{
border: 1px solid #b7bdcd;
background-repeat: repeat-x;
background-position: 0 -550px;
background-color: #e0e5f5;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航