RadControls version |
v4.x or Telerik.Web.UI v2007.3 1425
|
.NET version |
2.0
|
Visual Studio version |
2005
|
programming language |
C#
|
browser support |
all browsers supported by RadMenu
|
PROJECT DESCRIPTION
The
ImageUrl property can be used to set a
left logo for a menu item as suggested by the help topic on
Control the positioning of the image (ImageUrl). How about setting a
right logo to an item that has already used the
ImageUrl property for a
left logo? This can be achieved by applying a custom class which has the
background attribute set to an appropriate image.
STEPS TO REPRODUCE THE SCENARIO:
For this example I use the WebBlue skin (assume that it is located in
[ProjectFolder]/Skins/WebBlue).
1.
Add the following classes in the head tag of the aspx page
(<style> ...</style>). Alternatively,
these classes can be included to the css file of the skin.
.RadMenu_WebBlue .Custom |
{ |
/*same as the original .link class + the following:*/ |
background:transparent url(Skins/WebBlue/Menu/groupImage.gif) rightright center no-repeat; |
} |
|
.RadMenu_WebBlue .Custom:hover |
{ |
/*same as the original .link:hover class + the following:*/ |
background:transparent url(Skins/WebBlue/Menu/groupImage.gif) rightright center no-repeat !important; |
} |
|
.RadMenu_WebBlue .CustomOtherStates |
{ |
/*same as the original .expanded class + the following:*/ |
background:transparent url(Skins/WebBlue/Menu/groupImage.gif) rightright center no-repeat; |
} |
2. You also add the following to the rmLeftImage class to vertically center the left image. Here height should be set to the exact height of the image; margin-top should be adjusted in order to properly center the image (it may vary depending on the current skin).
.RadMenu_WebBlue .rmLeftImage |
{ |
height: 9px; |
margin-top: -5px !important; |
position: absolute; |
top: 50%; |
} |
3. Set the ImageUrl, CssClass, FocusedCssClass, and ExpandedCssClass properties like this:
<radM:RadMenuItem runat="server" ImageUrl="LeftLogo.gif" CssClass="Custom" |
FocusedCssClass="CustomOtherStates" ExpandedCssClass="CustomOtherStates" ...> |
STEPS TO REPRODUCE THE SCENARIO:
For this example I use the CssBlue skin.
1. Add the following classes to the css file of the skin. Alternatively, these files can be included in the head tag of the aspx page (<style> ...</style>).
.RadMenu_CssBlue .Custom |
{ |
/*same as the original .link class + the following:*/ |
background:transparent url(img/groupImage.gif) rightright center no-repeat; |
} |
|
.RadMenu_CssBlue .Custom:hover |
{ |
/*same as the original .link:hover class + the following:*/ |
background:transparent url(img/groupImage.gif) rightright center no-repeat |
!important; |
} |
|
.RadMenu_CssBlue .CustomOtherStates |
{ |
/*same as the original .expanded class + the following:*/ |
background:transparent url(img/groupImage.gif) rightright center no-repeat; |
} |
2. You also add the following to the leftImage class to vertically center the left image. Here height should be set to the exact height of the image; margin-top should be adjusted in order to properly center the image (it may vary depending on the current skin):
.RadMenu_CssBlue .leftImage |
{ |
/* ... */ |
height: 9px; |
margin-top: -5px !important; |
position: absolute; |
top: 50%;
|
} |
3. Set the ImageUrl, CssClass, FocusedCssClass, and ExpandedCssClass properties like this:
<radM:RadMenuItem runat="server" ImageUrl="LeftLogo.gif" CssClass="Custom" |
FocusedCssClass="CustomOtherStates" ExpandedCssClass="CustomOtherStates" ...> |