Different Colored Menus

[Michael Cunningham]

I'm trying to build color coded menus based on the color of the root menu item. ie:
portal.chaminade-stl.com


I've played with the skin provider and can do something like:

temp.radMenuItem.CssClass = temp.radMenuItem.CssClass & "TAB_CSS_" & .TabID

but this applies the style to the <a> tag not the <li>
 
Is there a way to set the root menu css programatically?

[Alex Gyoshev]

Hi Michael Cunningham,

Unfortunately, there is no way to achieve the desired effect through back-end code. Nevertheless, the following javascript will set an className of 'rmRootItemN' for each list item from the root menu (where N is a number, starting from 0):

function pageLoad ()
{
    var menu = $get('<%=RadMenu1.ClientID %>');

    var menuItems = menu.getElementsByTagName ('li');

    for (var i = 0, len = menuItems.length; i < len; i++)
    {
        menuItems[i].className += ' rmRootItem' + i;
    }
};

Regards,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Cunningham]

Here is a slightly modified version of your snippet that only targets the top level LI and also assigns a unique class to each root UL which we needed to color the dropdown to achieve a look similar to the sample provided. Hopefully this helps someone.

It would be nice if the core server control could at least have a way to assign a unique class to each element or be able to access it via attributes. The code below works fine on the small site it's intended for but on a site with a large menu it could add some nasty overhead.

function pageLoad ()
{
var count = 0;
    var menu = $get('dnn_dnnRADMENU_RadMenu1');
    var menuItems = menu.getElementsByTagName ('li');

    for (var i = 0, len = menuItems.length; i < len; i++)
    {

//Root Items LI
        if(menuItems[i].parentNode.className.indexOf('rmRootGroup') > 0 ){
         menuItems[i].className += ' RootItem' + count;
        count ++
        };

        // Root Group UL
                if(menuItems[i].parentNode.className.indexOf('rmLevel1') > 0 ){
         menuItems[i].parentNode.className += ' LevelA' + (count - 1);
        };


    }
};


</script>