How to set both RightLogo and LeftLogo for a menu item

1 posts, 0 answers
  1. Peter Georgiev
    Peter Georgiev avatar
    14 posts
    Member since:
    Jan 2006

    Posted 16 Aug 2006 Link to this post

    Requirements

    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 
            { 
                height9px
                margin-top-5px !important; 
                positionabsolute
                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 
            { 
                /* ... */ 
                height9px
                margin-top-5px !important; 
                positionabsolute
                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" ...> 

Back to Top