I have a menu that has 3 levels. The WebBlue Theme has the following style:
The top 2 levels of the menu I want the width to be 155px and this is working fine. What I would like to accomplish is setting level 3 of the menu to a width much larger than the top 2 levels to 340px. I feel like I'm kind of close, but need help getting the text to display correctly. Please see attached screen shot.
.RadMenu_WebBlue .rmItem a.rmLink { width: 155px !important; overflow: hidden !important; } .RadMenu_WebBlue .rmLink:hover, .RadMenu_WebBlue .rmFocused, .RadMenu_WebBlue .rmExpanded { width: 155px !important; min-height: 25px !important; color: #276c9d !important; background: #FFFFFF !important; border-color: #336699 !important; }The top 2 levels of the menu I want the width to be 155px and this is working fine. What I would like to accomplish is setting level 3 of the menu to a width much larger than the top 2 levels to 340px. I feel like I'm kind of close, but need help getting the text to display correctly. Please see attached screen shot.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function onClientItemOpening(s, e) { var item = e.get_item(); if (item.get_text() == 'Sub Menu 1') { for (var i = 0; i < item.get_items().get_count(); i++) { var li = item.get_items().getItem(i).get_element(); li.style.width = 340; } } } </script> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div> <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemOpening="onClientItemOpening"> <Items> <telerik:RadMenuItem Text="Applications"></telerik:RadMenuItem> <telerik:RadMenuItem Text="This App"> <Items> <telerik:RadMenuItem Text="Sub Menu 1"> <Items> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2"></telerik:RadMenuItem> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenu> </div> </form> </body> </html> 2 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 05 Mar 2013, 07:13 AM
Hello Rob,
You can set the OuterCssClass property of the RadMenuItems to controls the appearance of the item (the outer <li> tag). Please have a look at the following code and the attached snapshot.
ASPX:
CSS:
Thanks,
Princy.
You can set the OuterCssClass property of the RadMenuItems to controls the appearance of the item (the outer <li> tag). Please have a look at the following code and the attached snapshot.
ASPX:
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue"> <Items> <telerik:RadMenuItem Text="Applications"> </telerik:RadMenuItem> <telerik:RadMenuItem Text="This App" OuterCssClass="style1"> <Items> <telerik:RadMenuItem Text="Sub Menu 1" OuterCssClass="style1"> <Items> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1" OuterCssClass="style2"> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2"> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3"> </telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items></telerik:RadMenu>CSS:
<style type="text/css"> .style1 { width:155px !important; } .style2 { width:500px !important; }</style>Thanks,
Princy.
0
Rob
Top achievements
Rank 1
Rank 1
answered on 05 Mar 2013, 02:57 PM
Princy,
Your code works great only after I remove the width settings in the WebBlue Skin's css.
Thank you very much for your response!
Rob
Your code works great only after I remove the width settings in the WebBlue Skin's css.
Thank you very much for your response!
Rob