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

RadMenu style borders main items

4 Answers 199 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 1
Jacques asked on 25 Feb 2015, 08:46 AM
Hi there,

I almost succeeded in styling a RadMenu based on Menu.PNG.
The only thing I am not capable of is setting the borders for the main items (see Menu.PNG).
I have encloded a screen shot of my current styled menu (Test.PNG) and below you will find the css for the TEST.png menu.

Thanx!

Marcel
.RadMenu_Test .rmRootGroup, .RadMenu_Test a.rmLink, .RadMenu_Test .rmGroup .rmText, .RadMenu_Test .rmVertical .rmText, .RadMenu_Test .rmLeftArrow, .RadMenu_Test .rmRightArrow, .RadMenu_Test .rmTopArrow, .RadMenu_Test .rmBottomArrow, .RadMenu_Test .rmIcon {
    background-color: transparent;
}
 
 
div.RadMenu_Test .rmLink .rmText,
div.RadMenu_Test .rmFocused .rmText {
    line-height: 57px;
    color: red;
    font-size: 18px;
    font-weight: Bold;
}
 
 
div.RadMenu_Test .rmSelected .rmText,
div.RadMenu_Test .rmLink:hover .rmText,
div.RadMenu_Test .rmExpanded .rmText {
    color: #555;
}
 
 
div.RadMenu_Test .rmGroup,
div.RadMenu_Test .rmMultiColumn,
div.RadMenu_Test .rmGroup .rmVertical {
    background-color: #FFFFFF;
    border: 1px solid #979797;
}
 
 
div.RadMenu_Test a.rmLink:hover,
div.RadMenu_Test a.rmExpanded {
    background-color: aqua;
    border-radius: 8px 8px 0 0;
    border-left: 1px solid #979797;
    border-right: 1px solid #979797;
    border-top: 1px solid #979797;
}
 
 
div.RadMenu_Test .rmGroup .rmItem .rmLink .rmText {
    color: black;
    line-height: 30px;
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    background-color: white;
}
 
 
div.RadMenu_Test .rmGroup .rmItem .rmLink:hover {
    background-color: #fff;
    border: 0px;
}

4 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 25 Feb 2015, 09:36 AM
Hi Jacques,

The easiest way to add separators to the menu is setting the render mode property to lightweight.

If you would like to use classic render mode because of supporting IE7, try to apply the following:
.RadMenu_Test .rmItem {
    border-width: 0 1px;
    border-style: solid;
    border-color: transparent #fff transparent #ddd;
}
.RadMenu_Test .rmFirst {
    border-left: 0;
}
.RadMenu_Test .rmlast {
    border-right: 0;
}


Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jacques
Top achievements
Rank 1
answered on 25 Feb 2015, 03:29 PM
Hi Magdalena,

Thank you for your quick reply!
I have applied your code (suggestion 2) and I am getting closer.The only problem left are the seperator/borders applied are still visible when hovering over the main item (see Capture.PNG).

Any idea how to hide the seperators/borders when hovering over the main item?

Regards,Marcel
0
Jacques
Top achievements
Rank 1
answered on 27 Feb 2015, 02:21 PM
Hi Magdalena,

I am very curious in a possible solution as this is the last issue before going live.
I cannot find the attached sample solution you talked about.

Could you take a look?

Thanx!

Marcel
0
Magdalena
Telerik team
answered on 02 Mar 2015, 09:40 AM
Hi Jacques,

It seems that there were some technical problems. We have updated the post so now you can find the attachment.

Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Menu
Asked by
Jacques
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Jacques
Top achievements
Rank 1
Share this question
or