RadMenu style borders main items

5 posts, 0 answers
  1. Jacques
    Jacques avatar
    8 posts
    Member since:
    Mar 2013

    Posted 25 Feb 2015 Link to this post

    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;
    }

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 25 Feb 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jacques
    Jacques avatar
    8 posts
    Member since:
    Mar 2013

    Posted 25 Feb 2015 Link to this post

    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
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Feb 2015 Link to this post

    Hi Jacques,

    It is not possible to achieve this behavior without an additional JavaScript, as the borders around the hovered link comes also from siblings of its parent.

    We have noticed, that the separators in the image that you had provided in the first post, are not hidden by hovering items. They are only overlay by the border of a hovered item. We have attached a sample solution following this appearance.

    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.

     
  6. Jacques
    Jacques avatar
    8 posts
    Member since:
    Mar 2013

    Posted 27 Feb 2015 in reply to Magdalena Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017