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