Having problems creating a custom menu...

[mikejoseph]

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.

[Peter]

Hello Mike,

Our suggestion in such cases, when you want to customize the appearance of RadMenu, is to create a custom skin, rather than adding custom styles. There is a nice tutorial for on Creating a skin for Telerik RadMenu (classic version). However, you can apply the same approach for Prometheus RadMenu using the CSS class names table from the help on Migrating RadMenu Classic to RadMenu Prometheus. 

As for the first issue, it is caused by the fact that you are using the menu in "quirks" mode, which causes the browser to behave differently against CSS properties than when it is in "standards" mode.

You could add the following CSS declarations to remove the gaps:

<style type="text/css">
     .item { margin-left: -6px;}
     .first { margin-left: -3px;}
</style>

We are working on a work-around for this problem; you could read more about the two rendering modes at Peter Paul-Koch's weblog.

The other two problems will be solved if you create a custom skin. If, for some reason, they persist, don't hesitate to let us know.

We hope that you will find this. information useful and that it helps you with your problem.


Best wishes,
Peter
the Telerik team

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