Many curious customers send us tickets every week to ask us how they can implement a menu similar to that on our official website, www.telerik.com, using RadMenu for ASP.NET AJAX. The following post is inspired by them and is aimed at providing you with tips and code snippets to help you achieve this appearance and functionality.

The desired end-result


Telerik Menu

Let us start by adding the markup code of RadMenu

For the purpose, I will use the ItemTemplate of the RadMenuItem, where I will position different div elements. I will assign css classes and ID-s to these div-s that I can use later when styling the elements in the DropDown. For a base skin I will use the Black skin since it is the closest to the desired effect. I also attached some client-side events that will help me get the desired functionality when clicking on the “Product Families” menu item.

You will also notice that I set collapse/expand animation and animation duration in the definition of RadMenu in order to get a better look and feel of the menu itself. In addition to that, I used the ImageUrl and ExpandedImageUrl properties for changing the expand/collapse arrow in the rootitem. Intentionally, I did not include any text or images in the colorful rectangles in the DropDown, so that you can choose your own content and use it.

Markup:

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Black" ClickToOpen="True" CollapseAnimation-Duration="1100" ExpandAnimation-Type="InCubic"
    ExpandAnimation-Duration="1100" CollapseAnimation-Type="InCubic"
    OnClientMouseOver="OnClientMouseOverHandler" OnClientMouseOut="OnClientMouseOutHandler">
    <Items>
        <telerik:RadMenuItem Text="Product Families" PostBack="false"
            ExpandedImageUrl="../images/closeme.png" ImageUrl="../images/openme.png" CssClass="new">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <div id="outerWrap">
                            <div id="FirstLevelProductsWrapper" class="Wrapper1">
                                <div id="DevToolsDiv">
                                    <h3>DevTools</h3>
                                    <a href="http://www.telerik.com/developer-productivity-tools.aspx">DevTools</a>
                                </div>
                                <div id="IceniumDiv">
                                    <h3>Icenium</h3>
                                    <a href="http://www.icenium.com/">Icenium</a>
                                </div>
                                <div id="KendoUIDiv">
                                    <h3>Kendo UI</h3>
                                    <a href="http://www.kendoui.com/">Kendo UI</a>
                                </div>
                            </div>
                            <div id="SecondLevelProductsWrapper" class="Wrapper2">
                                <div id="TestStudioDiv">
                                    <h3>TestStudio</h3>
                                    <a href="http://www.telerik.com/automated-testing-tools/">TestStudio</a>
                                </div>
                                <div id="SitefinityDiv">
                                    <h3>Sitefinity CMS</h3>
                                    <a href="http://www.sitefinity.com/">Sitefinity CMS</a>
                                </div>
                                <div id="TeamPulseDiv">
                                    <h3>TeamPulse</h3>
                                    <a href="http://www.telerik.com/agile-project-management-tools/">TeamPulse</a>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Getting the desired functionality

Now, we need to create the open/close functionality that will enable the DropDown to open and close on click of the RootMenuItem. For the purpose I will use the ClickToOpen property and the OnClientMouseOut and the OnClientMouseOver client-side events.

JavaScript:

<script type="text/javascript">
            function OnClientMouseOverHandler(sender, args) {
                sender.set_clickToOpen(true);
                if (args.get_item().get_parent() == sender) {
                    sender.set_clicked(false);
                }
            }
 
            function OnClientMouseOutHandler(sender, args) {
                sender.set_clickToOpen(false);
            }
 
        </script>

CSS Styles

Finally, we need to add the styles needed for the nice look of Telerik’s ASP.NET Menu. For ease of use the css styles that need to be added are divided into several sections. There is also a detailed explanation regarding any of the css class selectors and its function. NOTE that to get the rounded corners I use border-radius that will be applied only for the later versions of the browsers.

First, I need to overwrite some of the styles that come with the predefined Black skin that I use as a base one:

CSS:

/*Styling the Root menu item */
/*************************************************************/
/*setting styles to the menu*/
        #RadMenu1 {
            background: none repeat scroll 0 0 #21242C;
            height: 35px;
            /*margin: 0 auto;*/
            padding: 0 20px;
            position: relative;
            width: 930px;
            z-index: 1;
        }
 
/*positioning the RootItem "Product Families" */
        a.rmLink.rmRootLink.new {
            height: 33px;
            margin-left: 405px;
        }
 
/*removing the default color of the Black skin of the RootItem, so that the dark gray is applied*/
        div.RadMenu_Black .rmRootGroup {
            background-color: transparent;
        }
 
/*removing the background image that comes from the Black skin */
        div.RadMenu_Black .rmRootGroup,
        div.RadMenu_Black a.rmLink,
        div.RadMenu_Black .rmText,
        div.RadMenu_Black .rmLeftArrow,
        div.RadMenu_Black .rmRightArrow,
        div.RadMenu_Black .rmTopArrow,
        div.RadMenu_Black .rmBottomArrow {
            background-image: none;
        }
 
/*setting styles to the text in the menu*/
            div.RadMenu_Black,
            div.RadMenu_Black a.rmLink,
            div.RadMenu_Black a.rmLink:hover {
                color: #C1C1C1;
                cursor: pointer;
                font: 400 11px/35px Arial,Tahoma,sans-serif;
                text-transform: uppercase;
            }
 
 
/*positioning the arrow of the RootItem to the right side of the text*/
        div.RadMenu .rmLeftImage {
            margin: 8px 2px 0 -3px;
        }
 
        div.RadMenu .rmLeftImage {
            float: right;
        }

In the second place, I will style the DropDown using the css class selectors below:

 CSS:

/*Styling the DroDownp menu item */
/******************************************************/
 
/*removing the background of the dropdown that comes from the Black skin*/
        div.RadMenu_Black .rmGroup,
        div.RadMenu_Black .rmMultiColumn,
        div.RadMenu_Black .rmGroup .rmVertical {
            background-image: none;
            background-repeat: no-repeat;
            background-color: transparent;
            border: none;
        }
 
        div.RadMenu_Black .rmSlide {
            background-image: none;
            background-color: transparent;
            border-radius: 0 0 10px 10px;
            height: 430px;
            margin-left: -21px;
            overflow: hidden;
            padding-top: 0px;
            position: absolute;
            width: 970px;
        }
 
        div.RadMenu .rmGroup .rmText {
            margin: 0px;
            padding: 0px;
        }
 
 
        #outerWrap {
            width: 970px;
            background: none repeat scroll 0 0 #21242C;
            border-radius: 0 0 10px 10px;
            padding-top: 25px;
        }

In the last place, I will style the colorful rectangles placed in the DropDown. For this purpose I have previously assigned ID-s to the div elements that will be used below:

CSS:

/*Styling the div elements in the DropDown */
/************************************************************/
/*sets the position of the first row in the dropdown */
        #FirstLevelProductsWrapper {
            height: 160px;
            display: inline-block;
        }
 
/*sets the position of the second row in the dropdown */
        #SecondLevelProductsWrapper {
            height: 160px;
            display: inline-block;
        }
 
/*sets the styles for the green rectangle */
        #DevToolsDiv {
            background-color: green;
            border-radius: 3px 3px 3px 3px;
            float: left;
            height: 135px;
            width: 298px;
            margin: 0 0 20px 20px;
            border-color: #0B9B22;
            background-color: #0A9F23;
            background-image: linear-gradient(#0CA125, #058A16);
        }
 
/*sets the styles for the grey rectangle */
        #IceniumDiv {
            background-color: #6E8282;
            background-image: linear-gradient(#708484, #566A6A);
            border-color: #687C7C;
            border-radius: 3px 3px 3px 3px;
            float: left;
            height: 135px;
            margin: 0 0 20px 20px;
            width: 298px;
        }
 
/*sets the styles for the orange rectangle */
        #KendoUIDiv {
            background-color: #D96F3C;
            background-image: linear-gradient(#DA713F, #CD582B);
            border-color: #C85025;
            border-radius: 3px 3px 3px 3px;
            float: right;
            height: 135px;
            margin: 0 0 20px 20px;
            width: 298px;
        }
 
/*sets the styles for the purple rectangle */
        #TestStudioDiv {
            background-color: #7A6090;
            background-image: linear-gradient(#7C6292, #644B7B);
            border-color: #745A8A;
            clear: both;
            margin: 0 0 20px 20px;
            border-radius: 3px 3px 3px 3px;
            float: left;
            height: 145px;
            width: 298px;
        }
 
/*sets the styles for the blue rectangle */
        #SitefinityDiv {
            background-color: #3F87B9;
            background-image: linear-gradient(#4289BA, #2C6FA7);
            border-color: #2768A0;
            border-radius: 3px 3px 3px 3px;
            float: left;
            height: 145px;
            margin: 0 0 20px 20px;
            width: 298px;
        }
 
/*sets the styles for the red rectangle */
        #TeamPulseDiv {
            background-color: #A73441;
            background-image: linear-gradient(#A93644, #91242E);
            border-color: #A1303D;
            border-radius: 3px 3px 3px 3px;
            float: left;
            height: 145px;
            margin: 0 0 20px 20px;
            width: 298px;
        }

Now that you have all you need, save your work and run the project.

Voila! Here is the result that you get:
RadMenuCustomized

Finally

In order to make it all clearer and more understandable here is a sample project that you can easily download and test locally. [DownloadTelerikMenu]

Did you like this tutorial? Is there anything else you’d like to accomplish that I can help you with?


About the Author

Katerina Manova

Katerina’s areas of interests are related to improving the services and customer care, as well as studying and applying different agile approaches in her work.

Related Posts

Comments