menu on Telerik site

[Fit2Page]

Hi,

I am trying to understand how you people build the "Products" menu on the Telerik website.

For a customer we must build a solution with the same hierarchy, so on click the sub- and the sub-sublevel is shown in one panel.

Can you explain how you did it?

Best Regards,

Marc

[Peter]

Hello Marc,

Please, view this kb article:
http://www.telerik.com/support/kb/aspnet-ajax/menu/telerik-web-site-radmenu-navigation.aspx


Greetings,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Schlurk]

I think you might want to check out the Multi-column RadMenu demo, this seems to show an example of exactly what you're looking for.

[Fit2Page]

You people are soooo coooool......

[Fit2Page]

Hi Peter,

I fill five Contextmenu's from DB.
Now I want the five Contextmenu's to expand on clicking the arrows.

It is giving me quite some headache to amend the javascript so that the menu can work with multiple Context menu's.

Have the following code:

<%@ Control Language="VB" AutoEventWireup="true" CodeFile="menu.ascx.vb" Inherits="Menu" %>


<script type="text/javascript">

// <![CDATA[

    var dropDownArrow;
    Sys.Application.add_load(function() {

    var menu = $find('<%= menuTopNavigation.ClientID %>');


     for (var u = 0; u < 2; u++) {//nieuw

    var productsItem = menu.get_items().getItem(u);

        dropDownArrow =
                productsItem.get_element().getElementsByTagName('span')[0].appendChild(
                document.createElement("a")
                );


        var contextMenu

        if (u==0) {
        contextMenu = $find('<%= niveauContext0.ClientID %>');
        }
        else if (u==1) {
        contextMenu = $find('<%= niveauContext1.ClientID %>');
        }
        else if (u==2) {
        contextMenu = $find('<%= niveauContext2.ClientID %>');
        }
        else if (u==3) {
        contextMenu = $find('<%= niveauContext3.ClientID %>');
        }
        else if (u==4) {
        contextMenu = $find('<%= niveauContext4.ClientID %>');
        }


        dropDownArrow.id = 'rmExpandMenuArrow';
        dropDownArrow.href = "#";
        dropDownArrow.onclick =
                function(e) {
                    if (!e) e = window.event;
                    if (!e.target) e.target = e.srcElement;

                    // open context menu

                    var pos = $telerik.getLocation(e.target.parentNode);

                    if (!(/rmMyClicked/.test(productsItem.get_linkElement().parentNode.className)))
                    {

                        contextMenu.showAt(pos.x, pos.y + e.target.parentNode.offsetHeight);
                        // set menu selected state
                        productsItem.get_linkElement().className += ' rmMyClicked';
                        productsItem.get_linkElement().parentNode.className += ' rmMyClicked';
                    } else {
                        productsItem.get_linkElement().parentNode.className.replace(' rmMyClicked', '');
                        contextMenu.hide();
                    }

                    // cancel event

                    e.cancelBubble = true;
                    if (e.stopPropagation)
                        e.stopPropagation();

                    if (e.preventDefault)
                        e.preventDefault();

                    return false;
                };


        contextMenu.add_hidden(function(sender, args) {
            setTimeout(function() {

                var link = productsItem.get_linkElement().parentNode;

                link.className = link.className.replace('rmMyClicked', '');
            }, 10);
        });
        }
    });







    Sys.Application.add_unload(function() {
        if (dropDownArrow != null) {

            dropDownArrow.onclick = null;


            if (!window.Page_Validators)
                return;

            for (var i = 0; i < Page_Validators.length; i++) {
                var validatorElement = Page_Validators[i];
                validatorElement.evaluationfunction = null;

                if (validatorElement.dispose) {
                    validatorElement.dispose();
                    validatorElement.dispose = null;
                }
            }
        }
    });
    // ]]>
</script>

<div id="Menu"><telerik:RadMenu ID="menuTopNavigation" DataFieldID="id" DataTextField="tekst" DataNavigateUrlField="linkto" runat="server" Flow="Horizontal" Skin="Mprise" EnableEmbeddedSkins="False" EnableViewState="False"></telerik:RadMenu></div>


<telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext0" EnableViewState="false">
<Items>
<telerik:RadMenuItem>
<ItemTemplate>
<div class="tBorderBox"><asp:PlaceHolder runat=server id="plh0" /></div>
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

<telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext1" EnableViewState="false">
<Items>
<telerik:RadMenuItem>
<ItemTemplate>
<div class="tBorderBox"><asp:PlaceHolder runat=server id="plh1" /></div>
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

<telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext2" EnableViewState="false">
<Items>
<telerik:RadMenuItem>
<ItemTemplate>
<div class="tBorderBox"><asp:PlaceHolder runat=server id="plh2" /></div>
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

<telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext3" EnableViewState="false">
<Items>
<telerik:RadMenuItem>
<ItemTemplate>
<div class="tBorderBox"><asp:PlaceHolder runat=server id="plh3" /></div>
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

<telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext4" EnableViewState="false">
<Items>
<telerik:RadMenuItem>
<ItemTemplate>
<div class="tBorderBox"><asp:PlaceHolder runat=server id="plh4" /></div>
</ItemTemplate>
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

Thanks in advance for your reply.

Marc

[Peter]

Hi Marc,

Attached is a modified demo that has context menu arrows for the first two items. You can extend the approach for as many items as you need.

Feel free to contact us if you have questions.


Greetings,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Fit2Page]

Thank you very much Peter.

[Angus]

Hi Peter,

I tried to implement localization using the sample you've provided. The radmenu_telerik2008.gif (please see the attached) is used for background in the top menu.

Here's the sample code:

<telerik:RadMenu ID="menuTopNavigation" runat="server" Flow="Horizontal" Skin="Telerik2008" EnableEmbeddedSkins="false" EnableViewState="false">
    <Items>
        <telerik:RadMenuItem Text="<%$ Resources: Resource1, Home %>"  Value="products" CssClass="tProducts" Width="136" NavigateUrl="~/Products.aspx" />

        <telerik:RadMenuItem Text="<%$ Resources: Resource1, Articles %>"  Value="consulting" NavigateUrl="~/Consulting.aspx" CssClass="tServices" Width="115">
        </telerik:RadMenuItem>

        <telerik:RadMenuItem Text="<%$ Resources: Resource1, Admin %>"  Value="purchase" NavigateUrl="~/Purchase.aspx" CssClass="tPurchase" Width="121">
        </telerik:RadMenuItem>

    </Items>
</telerik:RadMenu>

Attached sample.gif is what I want to achieve.

Thanks in advance,

B.E.

 

[Peter]

Hello Angus,

Can you try the steps from this forum post and let me know how it goes?

Regards,
Peter
the Telerik team