RadMenu for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The following tutorial demonstrates creating a custom RadMenu skin, using the default skin as a base. This new skin will take the appearance of the menu from its default look:

RadMenu Default Skin

to the following:

RadMenu Custom Skin

See Understanding the Skin CSS File for more information on specific CSS file properties.

Prepare the Project

  1. Drag a RadMenu from the toolbox onto a new AJAX-enabled application Web form.

  2. Use the RadMenu Item Builder to add items to the menu, or add them in the HTML markup:

    CopyASPX
    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Default">
    <Items>
        <telerik:RadMenuItem Text="File">
            <Items>
                <telerik:RadMenuItem Text="New...">
                    <Items>
                        <telerik:RadMenuItem Text="File">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Folder">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Open">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Exit">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Edit">
            <Items>
                <telerik:RadMenuItem Text="Cut">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Copy">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Paste">
                </telerik:RadMenuItem>
            </Items>
            </telerik :RadMenuItem>
            <telerik:RadMenuItem Text="Help" Enabled="false">
            </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

  3. Set the EnableEmbeddedSkins property to False.

  4. In the Solution Explorer, create a new "Green" directory in your project.

  5. Copy the default RadMenu skin files from the installation directory to the "Green" directory; copy both the \Menu directory that contains the images for this skin and the Menu.Default.css file that defines the skin styles.

    Note

    The file path will typically be similar to this example: \Program Files\Telerik\<Your Version of RadControls for ASPNET>\Skins\Default.

  6. In the Solution Explorer, rename "Menu.Default.css" to "Menu.Green.css". The Solution Explorer should now look something like the following:

    RadMenu Solution Explorer

  7. Open Menu.Green.css and replace all instances of _Default with _Green. Then save the file:

    RadMenu Replace _Default with _Green

  8. Drag the "Menu.Green.Css" file from the Solution Explorer onto your Web page. This automatically adds a reference to the page "<head>" tag as a "<link>" to the new stylesheet:

    RadMenu Add Link

  9. Change the Skin property of your RadMenu control to "Green".

  10. Run the application. The new "Green" skin looks just like the Default skin:

    RadMenu Default Skin

Css classes for root items

  1. In your favorite drawing tool, create a graphic that consists of a single light green rectangle. Save this graphic over the Menu|MenuBackGround.gif file.

  2. Run your application: notice the new background on the root items:

    RadMenu Background Image

  3. The font on the items is too light for the new background. To fix this, we need to change the stylesheet. Before starting to modifying the style sheet, however, take a look at the DOM-tree of RadMenu:

    CopyHTML
    <div id="RadMenu1" class="RadMenu RadMenu_Green ">
    <ul class="rmHorizontal rmRootGroup">
        <li class="rmItem rmFirst">
            <a href="#" class="rmLink ">
                <span class="rmText">File</span>
            </a>
            ...
         </li>
    </ul>
</div>

  4. The class that controls the font of the root items is .rmLink. In the "Menu.Green.Css" file, set the color to "green" and line-height to "26px":

    CopyCSS
    .RadMenu_Green .rmLink
{ 
    line-height: 26px; 
    text-decoration: none; 
    color: green;
    position: relative;
    display: inline-block !important;
}

  5. Change the border color to green, using the top-level .RadMenu_Green class:

    CopyCSS
    .RadMenu_Green
{ 
    border: 1px solid green; 
    background: #fff url(Menu/MenuBackground.gif) repeat-x top left; 
    text-align: left;
}

  6. The hover state of menu items is natively achieved by the pseudo class hover. Change the background-color on that class to "green" and the color to "#aad199"

    CopyCSS
    .RadMenu_Green .rmRootGroup .rmLink:hover,
.RadMenu_Green .rmRootGroup .rmFocused,
.RadMenu_Green .rmRootGroup .rmExpanded
{ 
    background-color: green; 
    color: #aad199;
}

  7. Run the application. The menu should now look as follows:

    RadMenu Root Items

Css classes for child items

  1. Before changing the child menus, take another look at the DOM-tree for RadMenu, this time focusing on the child menus:

    CopyHTML
    ...
<ul class="rmVertical rmGroup rmLevel1">
    <li class="rmItem rmFirst">
        <a href="#" class="rmLink ">
            <span class="rmText">New...</span>
        </a>
        ... 
    </li>
</ul>
...

  2. The class that controls the overall visual appearance of child items is the rmGroup class. Use this class to change the border around all the child items to green:

    CopyCSS
    .RadMenu_Green .rmGroup
{ 
    border: 1px solid green; 
    background-color: #fff;
}

  3. Individual child items are controlled by the .rmHorizontal or .rmVertical class, depending on their flow. Use these classes to give items a green border:

    CopyCSS
    .RadMenu_Green .rmHorizontal .rmItem { border-right: 1px solid green; } 
.RadMenu_Green .rmVertical .rmItem { border-bottom: 1px solid green; }

  4. The hover state for child menu items is controlled by the pseudo class hover. Use this to change the background color when the mouse is over child items:

    CopyCSS
    .RadMenu_Green .rmGroup .rmLink:hover,
.RadMenu_Green .rmGroup .rmFocused,
.RadMenu_Green .rmGroup .rmExpanded
{ 
    color: #fff; background: #aad199;
}

  5. The separator item is handled by a different class, .rmSeparator. Use this to change the color and margin of the separator:

    CopyCSS
    .RadMenu_Green .rmHorizontal .rmSeparator
{ 
    height: 20px; 
    width: 1px; 
    line-height: 20px; 
    background-color : #aad199; 
    border: 0;
} 

.RadMenu_Green .rmVertical .rmSeparator
{
    height: 1px; 
    margin: 2px 0;
    border: 0; 
    background-color: #aad199; 
    line-height: 1px;
}

  6. Run the application to see the effect of these changes:

    RadMenu Css Classes

Advanced Skinning techniques

  1. RadMenu uses two auxiliary classes, .rmFirst and .rmLast, that increase it’s skinning capabilities. The .rmFirst class is applied to every first .rmItem class on a level, and the .rmLast class is applied to the last .rmItem on a level. The Inox and Office2007 skins make heavy use of these two classes for skinning the first and last items of the group. Create a new entry to use the .rmFirst class to add a bar to the top of the first item in a vertical list:

    CopyCSS
    .RadMenu_Green .rmVertical .rmFirst { border-top: 3px solid #aad199; }

  2. In order for disabled items to have a distinct appearance from ordinary menu items, the .rmItem class has a .rmDisabled class. Use this to italicize the text on disabled items:

    CopyCSS
    .RadMenu_Green .rmRootGroup .rmItem .rmDisabled .rmText,
.RadMenu_Green .rmGroup .rmItem .rmDisabled .rmText
{ 
    color: #999; font-style:italic;
}

  3. Run the application. Notice the result of these changes:

    RadMenu Custom Skin

For more information about Cascading Style Sheets, see

See Also