Different Colored Menus

3 posts, 0 answers
  1. Michael Cunningham
    Michael Cunningham avatar
    68 posts
    Member since:
    Aug 2005

    Posted 03 Jun 2008 Link to this post

    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?

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 05 Jun 2008 Link to this post

    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
  3. Michael Cunningham
    Michael Cunningham avatar
    68 posts
    Member since:
    Aug 2005

    Posted 05 Jun 2008 Link to this post

    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 = 0len = 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> 
Back to Top