This is a migrated thread and some comments may be shown as answers.

Sub Menu

32 Answers 285 Views

This is a migrated thread and some comments may be shown as answers.

32 Answers, 1 is accepted

answered on 09 Feb 2016, 12:43 PM

Hello Sajith,

You can use the same approach if you want to show the template when expanding a sub-menu. Instead of setting a Template to the root items it can be set to the child items (in the example below the "Asia" and "Africa" items):

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Continents">

<Items>

<telerik:RadMenuItem Text="Asia">

<ContentTemplate>

<telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia">

<DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>

<Nodes>

<telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

</ContentTemplate>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Africa">

<ContentTemplate>

<telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa">

<DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>

<Nodes>

<telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode>

<telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode>

</Nodes>

</telerik:RadSiteMap>

</ContentTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

The following CSS rule needs to be modified, in order not to affect the dropdown holding the two child items:

/*old*/

html div.RadMenu_Glow .rmGroup,

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

}

/*new*/

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

}

Regards,
Ivan Danchev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 11 Feb 2016, 12:51 PM

MenuSample.zip

Hello Sajith,

I attached a sample page with the Menu demo modified to look closer to the one from your screenshot and you can further customize it to achieve the desired appearance. While our demos demonstrate the controls capabilities and functionality, customization according to specific requirements is up to the developer to implement.

Regards,
Ivan Danchev
Telerik

answered on 12 Feb 2016, 02:31 AM

submenu.jpg

Hi Thanks for the sample file. I have code in site.Master page as follows

<p> <form runat="server"><br> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager><br> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel><br> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager><br></p><p> </p><p><div class="MainManuContainer"><br> <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ><br> <DefaultGroupSettings Height="270px" /><br> <Items><br> <telerik:RadMenuItem Text="Continents"><br> <Items><br> <telerik:RadMenuItem Text="Asia" GroupSettings-OffsetX="-250"><br> <ContentTemplate><br> <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia"><br> <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings><br> <Nodes><br> <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode><br> </Nodes><br> </telerik:RadSiteMap><br> </ContentTemplate><br> </telerik:RadMenuItem><br> <telerik:RadMenuItem Text="Africa" GroupSettings-OffsetX="-250"><br> <ContentTemplate><br> <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa"><br> <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings><br> <Nodes><br> <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode><br> <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode><br> </Nodes><br> </telerik:RadSiteMap><br> </ContentTemplate><br> </telerik:RadMenuItem><br> </Items><br> </telerik:RadMenuItem><br> </Items><br> </telerik:RadMenu><br> </div></p>

But menu appearing as blank, can you check what I am missing. When adding following block its giving me run time error. Css part is all in seperate CSS file.

<asp:ScriptManager ID="Scriptmanager1" runat="server" />

answered on 16 Feb 2016, 11:18 AM

MenuMasterContent.zip

Hello Sajith,

I attached a .zip file containing Master and Content pages. At my end the Menu works correctly in this scenario, here's a short video to demonstrate that.

As for the error you are getting when you try to add an asp:ScriptManager, I noticed that you already have added a RadScriptManager on the master page, so it is expected that an exception will be thrown if you attempt to add another ScriptManager instance. Only one instance should be present on the page (Master), there is no need to declare more instances on the content pages, or UserControls.

Regards,
Ivan Danchev
Telerik

answered on 03 Mar 2016, 02:11 PM

Hello Sajith,

You can place the items in the sub-menus into 3 columns by setting the RepeatColumns property in DefaultGroupSettings to 3:

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu2" Skin="Glow" ClickToOpen="true">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Continents" GroupSettings-OffsetX="200">

<Items>

<telerik:RadMenuItem Text="Item1">

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

<style>

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

background-color: rgba(104, 176, 237, .75);

color: black;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

background-color: rgb(0, 82, 204);

color: black;

}

</style>

On the third point, what you mean by "need small highlight"?

Regards,
Ivan Danchev
Telerik

answered on 03 Mar 2016, 03:28 PM

menu2.png

Hi Ivan,

thanks for your help.

RepeatColumns property repeating the image for the menu item, i dont want to image to me repeated in each column. and grey/yellow hilight of the menu item hover length is up to menu item frame width, I need that to be small. Please see image attached you can understand better.

answered on 07 Mar 2016, 03:59 PM

Hello Sajith,

The issue with the image being displayed for all columns can be solved by changing the CSS rule's selector:

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background: url("images/MyImage.jpg") no-repeat scroll 0 0 rgba(104, 176, 237, .75);

background-repeat: no-repeat;

}

As for the second question, the highlight effect cannot be limited to just a part of the item's length, because it is achieved with background color. Setting the background color means the whole item will be colored on hover, i.e. the highlight effect will be just as big as the item itself.

Regards,
Ivan Danchev
Telerik

answered on 09 Mar 2016, 03:34 AM

submenu.png

Hi I can able to achieve the layout i want, but only issue is that offsetting the sub menu in the wrong position. Please see the output Iam getting marked as wrong in picture attached and output i want as marked with tick mark in picture. Also attached CSS and menu item code in master page "MasterPage.master". Please let me know what changes i need to offset sub menu in in proper position.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.demo-container {

width: 460px;

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 14px;

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

background-color: rgba(104, 176, 237, .75);

color: black;

width: 150px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background: url("logout_blue.gif") no-repeat scroll 0 0 rgba(104, 176, 237, .75);

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgb(50, 82, 204);

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

background-color: rgb(0, 82, 204);

color: black;

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 12px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 40px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

<form id="Form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu2" Skin="Glow" ClickToOpen="false">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Menu Item 1" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item 3" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item 4" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

thanks

answered on 09 Mar 2016, 03:51 PM

Hello Sajith,

The submenus offset can be set through the OffsetX and OffsetY properties, so you can set them like this for the items under Menu Item 2:

<telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" GroupSettings-OffsetX="190">

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" GroupSettings-OffsetY="70">

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

Regards,
Ivan Danchev
Telerik

answered on 09 Mar 2016, 07:50 PM

menupng.png

Hi Ivan

Everything looks ok. but ended up with 2 issues.

1. Need different images for different menu.

2. in sub menu and sub-sub menu leaves a black box area if there is no enough menu item ( if there its not multiple of 3) . please see pic attached

Code with latest css is here :

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.demo-container {

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 14px;

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

background-color : rgba(183, 209, 227, .75);

color: white;

width: 200px;

padding-top:40px;

padding-bottom:40px;

padding-left:10px;

padding-right:10px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background: no-repeat scroll 0 0 rgba(183, 209, 227, .75);

background-position:left center;

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(50, 82, 204, .75);

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

background-color: rgba(99, 158, 200, .75);

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 12px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 40px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

<form id="Form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item 3" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item 4" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Item2" ><Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Item1" >

<Items>

<telerik:RadMenuItem Text="SubItem1">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

answered on 10 Mar 2016, 01:46 PM

Hello Sajith,

Different background images can be set to different submenus by using separate rules with the correct corresponding selector, for example: html div.RadMenu_Glow .rmItem:nth-of-type(1) .rmSlide .rmFirstGroupColumn .rmLevel1
As for the differently colored part of the submenus it comes from the different height of the li elements with class rmGroupColumn and the ul element with class rmMultiColumn that contains the li elements. You are not setting the background of the ul element, furthermore the li elements have opacity set to their background, which results in the observed appearance.

Regards,
Ivan Danchev
Telerik

answered on 11 Mar 2016, 12:23 AM

HI Ivan
I can able to manage and everything looks ok in Chrome and FireFox but Internet explorer giving wrong. Working copy of code is attached also screen shot from both browser;
Please help. Please see the working code.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.demo-container {

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 16px;

}

html div.RadMenu_Glow .rmPopup {

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

/*background-color : rgba(183, 209, 227, .75);*/

color: black;

font-size: 14px;

width: 200px;

padding-top:40px;

padding-bottom:40px;

padding-left:10px;

padding-right:10px;

}

html div.RadMenu_Glow .rmMultiColumn {

border: 0;

background: no-repeat scroll 0 0 rgb(133, 199, 254);

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-position:left center;

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmItem:nth-of-type(2) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("one.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(3) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("two.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(4) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("three.png");

}

html div.RadMenu_Glow .rmPopup {

/*background: none repeat scroll 0 0 rgba(50, 82, 204, .75);*/

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

/* background-color: rgba(99, 158, 200, .75);*/

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 11px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 10px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

<form id="Form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false" zindex="8000">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Home" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A " ><Items >

<telerik:RadMenuItem Text="Menu Item A1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu A3" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B " >

<Items >

<telerik:RadMenuItem Text="Menu Item B1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B6" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C " >

<Items >

<telerik:RadMenuItem Text="Menu Item C1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C6" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C7" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C8" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C9" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C10" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C11" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C12" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C13" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C14" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C15" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16" GroupSettings-Offsety ="145" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C18 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 c"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 D"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

answered on 14 Mar 2016, 02:56 PM

menu-window.png

Hi Ivan,

You are right, It was not showing on IE because of previous change in Cached on IE, its ok now. Thanks for your help.

I have a small issue with Zindexing (i believe). I am opening a window using RadWindowManager control bu i need this window on top of menu layer. What property i need to setting menu or window? Following is the code I am using to open window.

<telerik:RadWindowManager

ClientIDMode="Static"

ID="subWindow"

runat="server"

Width="560"

Height="530"

VisibleStatusbar="false"

Behaviors="Move"

DestroyOnClose="true"

Modal="true"

ShowContentDuringLoad="false"

ShowOnTopWhenMaximized ="true">

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function OpenWin() {

var manager = $find('subWindow');

manager.open('/URL', null);

return false;

}

</script>

</telerik:RadScriptBlock>

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Sub Menu

32 Answers, 1 is accepted