This is a migrated thread and some comments may be shown as answers.

Hover RootGroup Only? Custom Skin

1 Answer 83 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 13 Aug 2008, 03:47 PM
Firstly, thanks for anyone reading this.

Re: Custom Skinning

I'm sure this is possible, but the code is eluding me. I have a background image (BackgroundTab.gif) set as the background of each of the RootGroup items. When I hover over it, I would like another image to replace the tab (BackgroundTab2.gif). However, thus far I have only been able to apply Background2.gif to any item I hover over, including child items. Any ideas on how to do this?

Thank you so much


Menu.ABMenu.css source

.RadMenu_ABMenu *  
{  
    padding: 0;  
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup  
{  
    float: left;  
    height: 15px;     
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem  
{  
    background: transparent url('Menu/BackgroundTab.gif') no-repeat;  
}  
 
.imgTab  
{  
    width: 100%;  
    position: relative;  
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmFirst  
{  
    /*background-position: -750px 0;  
    background: transparent url('Menu/BackgroundFirst.gif') no-repeat;  
    height: 15px;  
    width: 20px;*/  
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmLast  
{  
    /*background-position: 100% 0;  
    background: transparent url('Menu/BackgroundLast.gif') no-repeat;  
    height: 15px;*/  
}  
 
.RadMenu_ABMenu .rmVertical.rmRootGroup  
{  
      
    border: 1px solid #00FF00;  
    float: left;  
    padding: 0 5px;  
}  
 
/*Any item that links somewhere*/  
.RadMenu_ABMenu .rmLink  
{  
    font: 11px/15px Arial,verdana,sans-serif;  
    margin: 3px 0;  
    color: #BB0000;  
    text-decoration: none;    
}  
 
.RadMenu_ABMenu .rmLeftImage  
{  
    margin: 0 2px;  
}  
 
.RadMenu_ABMenu .rmText  
{  
    margin: 0 0 0 13px;  
    padding: 0 13px 0 0;  
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem:hover  
{  
    background: transparent url('Menu/BackgroundTab2.gif') no-repeat;  
}  
 
.RadMenu_ABMenu .rmLink:hover,  
.RadMenu_ABMenu .rmExpanded,  
.RadMenu_ABMenu .rmFocused  
{  
    color: #fff;  
    border-bottom: solid 1px #fff;  
}  
 
.RadMenu_ABMenu .rmLink:hover .rmText,  
.RadMenu_ABMenu .rmExpanded .rmText,  
.RadMenu_ABMenu .rmFocused .rmText  
{  
        /*background: #333;*/  
}  
 
/* submenus */  
 
.RadMenu_ABMenu .rmRootGroup .rmGroup  
{  
    background: transparent url('Common/inoxHeader.jpg') repeat 0 0;  
}  
 
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmItem  
{  
    background: none;  
    padding: 1px 5px;  
}  
 
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink  
{  
    line-height: 17px;  
    color: #0000DD;  
}  
 
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLeftImage  
{  
    margin: 0 3px;  
}  
 
/*Items below the RootGroup*/  
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover,  
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded,  
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused  
{  
    color: #171717;  
    background: transparent url('Menu/separatorTab.gif') no-repeat;  
    background-position: 80px 0px;  
}  
 
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover .rmText,  
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded .rmText,  
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused .rmText  
{  
    background: transparent url('Menu/ItemBgLight.gif') no-repeat 100% 0;  
}  
 
/* separators */  
.RadMenu_ABMenu .rmVertical.rmRootGroup .rmItem.rmSeparator  
{  
    background: #CCC;  
    height: 1px;  
    font-size: 0;  
    line-height: 0;  
    border-bottom: 3px solid #fff;  
}  
 
/*Affects any Item whose isSeparator field is set to true*/  
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem.rmSeparator  
{  
    background: transparent url('Menu/separatorTab.gif') no-repeat;  
    width: 45px;  
    height: 15px;  
}  
 
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmVertical .rmItem.rmSeparator,  
.RadMenu_ABMenu .rmVertical.rmRootGroup .rmVertical .rmItem.rmSeparator  
{  
    padding: 0;  
    height: 1px;  
    margin-left: 5px;  
    border-bottom: 0;  
}  
 
/* disabled items */  
 
.RadMenu_ABMenu .rmDisabled,  
.RadMenu_ABMenu .rmDisabled:hover  
{  
    color: #666;  
    background: none;  
}  
 
.RadMenu_ABMenu .rmDisabled:hover .rmText  
{  
    background: none;  
}  
 
.RadMenu_ABMenu .rmTopArrow,  
.RadMenu_ABMenu .rmBottomArrow  
{  
    height: 10px;  
    width: 100%;  
    background: #000 url(Menu/ArrowScrollUpDown.gif) no-repeat top center;  
}  
 
.RadMenu_ABMenu .rmBottomArrow  
{  
    background-position: center -18px;  
}  
 
.RadMenu_ABMenu .rmLeftArrow,  
.RadMenu_ABMenu .rmRightArrow  
{  
    width: 10px;  
    height: 100%;  
    background: #000 url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;  
}  
 
.RadMenu_ABMenu .rmRightArrow  
{  
    background-position: -18px center;  

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 15 Aug 2008, 08:27 AM
Hi Michael,

Please add the following style to set the hover image of root items:

.RadMenu_ABMenu .rmRootGroup .rmLink:hover   {     
   backgroundtransparent url('Menu/BackgroundTab2.gif'no-repeat;     
}  

I hope this helps.

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Menu
Asked by
Michael
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or