Hello -
I'm having various problems implementing RADMenu into a site I'm working on. I'm trying to implement a custom implementation of RADMenu, meaning I don't want to use any of the embedded skins, but either I want to create my own skin or preferably, I'd like to just add a few custom styles to my css and apply a few CSSClass properties in my RadMenu, but it's not seeming to work for me as I would like. Personally, I'm a little tad bit disappointed that with both radmenu original and prometheus, there's no sample under the "Appearance" tab for "Custom CSS" ...
Here is the CSS I'm created:
| /* Telerik RAD Menu */ |
| .RadMenuItem { padding: 4px; color: White; background-color:#cc0000; font-size:11px; border-bottom:solid 0px #FFFFFF; border-top:solid 0px #5F906F; border-left:solid 0px #5F906F; border-right:solid 0px white; cursor:pointer; text-align:left; text-decoration:none; } |
| a.RadMenuItem:link { color:White; text-decoration: none; } |
| a.RadMenuItem:hover { color:White; text-decoration: underline; } |
| .RadMenuItemHover { background-color:#000 } |
Here is the menu source:
| <telerik:RadMenu ID="RadMenu1" runat="server" BorderWidth="0px" |
| CausesValidation="False" EnableEmbeddedSkins="false" Width="740" style="white-space: normal; cursor: pointer"> |
| <Items> |
| <telerik:RadMenuItem runat="server" HoveredImageUrl="~/images/menu/news_over.gif" |
| ImageUrl="~/images/menu/news.gif" NavigateUrl="~/News.aspx"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" ImageUrl="~/images/menu/service.gif" HoveredImageUrl="~/images/menu/service_over.gif"></telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" HoveredImageUrl="~/images/menu/coupons_over.gif" |
| ImageUrl="~/images/menu/coupons.gif" NavigateUrl="~/images/menu/coupons_over.gif"> |
| <GroupSettings Width="100" /> |
| <Items> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Parts Coupons" NavigateUrl="Coupons.aspx?View=Parts"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Service Coupons" NavigateUrl="Coupons.aspx?View=Service"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" runat="server" Text="Vehicle Coupons" NavigateUrl="Coupons.aspx?View=Vehicle"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Dealer Coupons" NavigateUrl="Coupons.aspx?View=Dealer"></telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" HoveredImageUrl="~/images/menu/specials_over.gif" |
| ImageUrl="~/images/menu/specials.gif" NavigateUrl="~/images/menu/specials_over.gif"> |
| <GroupSettings Width="100" /> |
| <Items> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" NavigateUrl="Specials.aspx?Type=Monthly" Text="Monthly Specials"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" NavigateUrl="Specials.aspx?Type=Dealer" Text="Dealer Specials"></telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" HoveredImageUrl="~/images/menu/commercials_over.gif" |
| ImageUrl="~/images/menu/commercials.gif" NavigateUrl="~/Media.aspx"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" HoveredImageUrl="~/images/menu/controls_over.gif" |
| ImageUrl="~/images/menu/controls.gif"> |
| <GroupSettings Width="100" /> |
| <Items> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Calendar" NavigateUrl="Calendar.aspx"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="My Profile" NavigateUrl="CustomerProfile.aspx"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="FAQ" NavigateUrl="FAQ.aspx"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Privacy" NavigateUrl="Privacy.aspx"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Feedback" NavigateUrl="Feedback.aspx"></telerik:RadMenuItem> |
| <telerik:RadMenuItem CssClass="RadMenuItem" ForeColor="White" runat="server" Text="Help" NavigateUrl="Help.aspx"></telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenu> |
Anyway... here are my issues in order of priority... #1 is the big one... I've managed to hack my way beyond all other issues:
1. In IE, spaces always seem to appear between my menu items... In Firefox, I don't have this issue. I've run across this issue in the past, but it used to be solved by setting "EnableEmbeddedSkins" to false, but not this time for some reason. To see an example of what's happening to me, go to:
http://www.interappdevelopment.com/Archives/2008-01-29/IE_FF_Sample.jpg
I try adjusting the width property. Firefox pays attention to this and elminates the spaces... IE will keep them there no matter what I set the width to. I've also tried applying style="whitespace: normal" and style="whitespace:nowrap" with no success.
2. Is there a way to easily apply CssStyle to all the expand elements, without having to apply it to each expanded menu item? Also is there a way that I can actually make the font of the link white w/o putting that ForeColor white in the markup as well? If I don't, the link color is grey like the default anchor color... you can see where I tried to override it w/ my CSS (unsuccessfully)
3. Can I get the cursor to be a pointer over the menu and not the regular old cursor? I tried putting "cursor: pointer" in my css, but it is ignored or overriden by something else it seems.
I apologize if some of this is trivial. If there's some sort of document on creating a custom skin that i missed (believe me I've been looking), please point me to it.
Thanks in advance for any help or insight that you can provide.
Best,
Mike Joseph
Interapp Development, Inc.