Rank 1
There are three simple steps to getting your RADMENU working in DNN / DOTNETNUKE / DNN 5+
Step 1) Register the control
Thanks to this post, I learned how to properly write my declaration, which is included below: http://www.telerik.com/community/forums/dotnetnuke/skin-objects/looking-for-dnn-sample-skin-for-radmenu.aspx
Here is my declaration, exactly as it stands. You place this, or a modified version to your liking in your skin.ascx. In case you don't know, that document sits in your Portals/X/Skin folder (whatever your location is exactly) and gets parsed when you upload your skin. Open your skin.ascx file. If there is already an entry there for the classic version of RADMENU, remove it. Next, add a line like this in next to the other similar looking entries, but don't overwrite one of the other ones accidentally.
<%
@ Register TagPrefix="dnn" TagName="RADMENU" Src="~/DesktopModules/r.a.d.menu/RadMenu.ascx" %>
Part 2, Add RADMENUAJAX to your skin
You cannot get the results you want without seeing the link to the skinning whitepaper below. Basically, you will add this info to where you call in your RADMENU into your skin. With the classic version, you used to add these into the skin.xml, but not with ASP.NET AJAX version of RADMENU. Below is a link to the Telerik whitepaper with all the good little things you can do in DNN with radmenu. Everything from animations, separators, etc, etc.
Now this is important: I read that DotNetNuke wont parse this info properly. So, you'll have to add it directly to your .ascx manually as I did. Parse your skin out, go up and grab the ascx and edit this in. Basically, it's better to just skin that way anyway. Take a look at how mine looks seen below.
Telerik Skinning API whitepaper: http://www.telerik.com/help/aspnet/menu/menu_apireference.html
<dnn:RADMENUAJAX runat="server" EnableEmbeddedSkins="false" id="dnnRADMENU" Skin="Vista" ExpandAnimationType="InOutElastic" ExpandAnimationDuration="300" CollapseAnimationType="none" childGroupSeparator="*SkinPath*/Menu/dnn/img/child_sep.gif" childGroupSeparatorCssClass="childseparator" HeaderSeparator ="*SkinPath*/Menu/dnn/img/nav-sep.gif" HeaderSeparatorCssClass="headerseparator" />
Save the document and upload it back, refresh your site. Should be working.
Part 3) Let RADMENU AJAX FOR DNN see your style
In order for your solution to work, Telerik says you'd need to link to a properly named css file with the skin name. Except, that isn't a good solution in DNN. See, you cannot just go linking to external resources in your ascx skin because it will render outside of the header and your skin won't validate according to w3c standards.
Instead, just include (combine) the CSS entries from your menu style document into your skin.css and comment the section so you can find it easily later.
VERY IMPORTANT, the classes are SUFFIXED with the skin name. Suffix means FOLLOWING. You can use the internal styles that are hidden away in the telerik UI DLL or make your own. It can be named whatever you like, but you must suffix your classes with that name and that name must match what is set when you reference RADMENU (see step 2 below)
ex: .RadMenu_Vista .
.Radmenu goes before the underscore. Now, RADMENU is using psudo classes, which are a little different than what you might be used to. Have a look at my CSS below and you will see what I mean.
Here is a link describing all the styles that will absolutely work for you in DNN as they did for me:
http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html
Here is the complete CSS code behind my menu, and yes, it sits in my skin.css.
/* <RadMenu / Vista> */.RadMenu_Vista .headerseparator {background-image:url(Menu/dnn/img/nav-sep.gif);width:1px;height:50px;}
.RadMenu_Vista .rmLink {font-family:Tahoma;font-size:14px;font-weight:lighter;}
/* <Root items> */
.RadMenu_Vista .rmVertical {width:248px;}.RadMenu_Vista .rmLink {line-height: 38px; text-decoration: none; color: white; position: relative; display: inline-block !important; }
.RadMenu_Vista .rmLink:hover {line-height: 38px; text-decoration: none; color: yellow; position: relative; display: inline-block !important; background-image:url(Menu/dnn/img/navbg_hover.gif); }
/* </Root items> */
/* <Submenu items> */
.RadMenu_Vista .rmVertical .rmSeparator {height: 1px; line-height: 1px; background-image:url(Menu/dnn/img/child_sep.gif);height:2px;background-repeat:no-repeat;margin-left:20px; }.RadMenu_Vista .rmGroup {padding-bottom:50px;}
.RadMenu_Vista .rmGroup .rmLink {line-height:28px;}
.RadMenu_Vista .rmGroup .rmLink:hover,
.RadMenu_Vista .rmGroup .rmFocused, .RadMenu_Vista .rmGroup .rmExpanded {color: yellow; background-image:url(Menu/dnn/img/child_hov.gif); background-repeat:no-repeat; }
.RadMenu_Vista .rmVertical {background-image:url(Menu/dnn/img/child_back.gif); background-repeat:no-repeat; background-position: 0 14px; line-height:28px; width:248px;}
.RadMenu_Vista
.rmGroup .rmFirst {background-image:url(Menu/dnn/img/menu_top.gif); background-repeat:no-repeat; padding-top:15px;width:248px;}
.RadMenu_Vista .rmGroup .rmLast {background-image:url(Menu/dnn/img/menu_bottom.gif); margin-bottom:-15px; background position: 0 13px; background-repeat:no-repeat; width:248px; }
4) Images
If you pasted my code above and got this far and yet nothing, then you probably forgot to put up images for your menu or change the css above to refect background colors instead of images. Get it done.
Now, time to make the sprite for this menu... ;-)