Menu CSS help

[David]

I created css for RadMenu and it does some things right. However, some issues remain, such as selected tab css, and end of menu css. In addition separation between tabs looks a little incomplete. Can you please take a look? Code and Pic attached

Thank you

 .RadMenu .rmItem
        {           
            font-family: 'Open Sans', sans-serif;
            font-size:13px;
            font-weight:bolder;
            text-decoration:none;
            text-align:center;
            position:relative;
            padding:5px;
            outline: none;
        
            background-image: linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
            background-image: -o-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
            background-image: -moz-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
            background-image: -webkit-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
            background-image: -ms-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7B1342),color-stop(1, #DB4D8D));

            -pie-background: linear-gradient(#DB4D8D, #7B1342);
            behavior: url(/styles/pie/PIE.htc);
     
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
    
            -webkit-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
            -moz-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
            -o-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
            box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
     
        }

[Veselin Tsvetanov]

Hello David,

Below you will find some CSS selectors that may help you to enhance the look and feel of your custom RadMenu:

/* Access menu items. Style their border (separation line) */
html .RadMenu .rmRootGroup .rmItem {
    border-color: yellow;
}

/* Access menu items links. Style their appearance on hover  */
html .RadMenu .rmRootGroup .rmRootLink:hover {
    background-color: yellow;
    background-image: none;
}

/* Access menu root group. Style its background */
html .RadMenu .rmRootGroup {
    background-image: linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
    background-image: -o-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
    background-image: -moz-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
    background-image: -webkit-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
    background-image: -ms-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7B1342),color-stop(1, #DB4D8D));
}

The following Documentation article might help you understand better the structure of the RadMenu DOM object and the possible use of CSS selectors for applying custom styles to it.

Regards,
Veselin Tsvetanov
Telerik

[David]

Hi Veselin,

     This is very helpful. Can you also please help with changing of highlight color (greenish color on top)? Also, selected tab menu colors

Thank you

David

   

[Veselin Tsvetanov]

Hi David,

You could do that by using the following rules:

/* Style Selected / Expanded state */
html .RadMenu_Silk .rmRootGroup .rmSelected > .rmRootLink,
html .RadMenu_Silk .rmRootGroup .rmExpanded > .rmRootLink {
    background-image: none;
    background-color: green;
}

/* Style Hover state */
html .RadMenu_Silk .rmRootGroup.rmHorizontal .rmItem > .rmRootLink:hover,
html .RadMenu_Silk .rmRootGroup.rmHorizontal .rmItem > .rmRootLink:hover {
        border-top: 4px solid black;
}

Regards,
Veselin Tsvetanov
Telerik

[David]

Veselin,

     Style Hover works perfectly, however Style Selected made no difference

     Any idea?

Thank you

[Veselin Tsvetanov]

Hi David,

In case your RadMenu is in Lightweight RenderMode, you should apply the following styles for selected state:

html .RadMenu_Silk .rmRootLink.rmFocused,
html .RadMenu_Silk .rmRootLink.rmSelected,
html .RadMenu_Silk .rmRootLink.rmExpanded {
    background-image: none;
    background-color: green;
}

You may find it useful to consult the following article on RenderModes.

Regards,
Veselin Tsvetanov
Telerik

[David]

That was it!!!

Thank you very much