Arrow indicating children for submenu

[matt Sword]

Hello all,

I'm using the horizontal menu with drop downs.
I've successfully deployed a custom CSS for my menu, however I can not figure out how to display the arrow effect when an item has children.
I've found the css skin file selectors, and it looks like rmExpandLeft is the class to manipulate it, but when I add that element to the CSS file it doesn't do anything.
I've compared the source for "Default" css and my custom css and the HTML output is the same; additionally, there is NO rmExpandLeft in the HTML, so I'm not sure how to determine if it has children.

Any clues?

Regards

Matt

[Yana]

Hi Matt,

Could you please open s support ticket and send us your custom skin there,  we'll modify it in order to show arrows? Thanks in advance

Greetings,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Jason Fedler]

I would be interested to know how this works as well! Thanks, jF

[Yana]

Hi Jason,

The skin of the menu should be modified in order to add the arrows. Which skin you're using?

Greetings,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Jason Fedler]

I'm using the "Simple" skin, but there's not much of the original skin left untouched. I started out using the Style Builder on the website, but have since modified a lot of other CSS selectors and properties to narrow it down...it's 143 lines now with quite a few comment lines. Assuming the code would be helpful, here it is:

/* <RadMenu / Simple> */

/* padding is where left edge of Project Center starts */
.RadMenu_pdeMainMenu ul.rmRootGroup,
.RadMenu_pdeMainMenu div.rmRootGroup
{
    padding: 1px 0px;
    background-image: none;
}

/* Main Menu Items */
.RadMenu_pdeMainMenu,
.RadMenu_pdeMainMenu a.rmLink
{
    font: normal 12px/19px "Tahoma", Geneva, sans-serif;
    color: #58707E;
}

/*  */
.RadMenu_pdeMainMenu .rmItem a.rmLink
{
    padding: 2px 12px;
    background-image:none;
}

/*  */
.RadMenu_pdeMainMenu .rmItem a.rmLink .rmText
{
    padding-right: 2px;
    background-image: none;
}

/* breadcrumb background color stuff */
.RadMenu_pdeMainMenu .rmItem a.rmLink:hover,
.RadMenu_pdeMainMenu .rmItem a.rmFocused,
.RadMenu_pdeMainMenu .rmItem a.rmSelected
.RadMenu_pdeMainMenu .rmItem a.rmExpanded,
.RadMenu_pdeMainMenu .rmItem a.rmExpanded:hover
{
    background: #E5EDED;
    background-image: none;
    padding-bottom: 3px;
}

/* FINALLY - the breadcrumb text color */
.RadMenu_pdeMainMenu .rmItem a.rmFocused .rmText
{
    color: #A52A2A;
}

/*  */
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink
{
    padding: 1px;
    margin: 1px 0px;
}

/* Hovered expanded menu items */
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink:hover,
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmFocused,
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmSelected,
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmExpanded,
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmExpanded:hover
{
    padding: 0px;
    background-image: none;
    background-color: #E5EDED;
}

/* Padding for submenu items */
.RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink .rmText
{
    padding-right: 30px;
}

/* MainMenu background items */
 DIV.RadMenu_pdeMainMenu .rmRootGroup {
    BORDER: 0px;
    BACKGROUND-COLOR: #58707E;
}

/* MainMenu Text */
 DIV.RadMenu_pdeMainMenu .rmItem .rmLink {
    LINE-HEIGHT: 19px;
    COLOR: #FFFFFF;
    FONT-SIZE: 14px;
    FONT-WEIGHT: bold;
}

/* MainText entire-cell background highlighting */
 DIV.RadMenu_pdeMainMenu .rmItem .rmLink:hover {
    BACKGROUND-COLOR: #B3CACD;
    padding: 1px 12px 3px 12px;
}

/* Hover-over Text highlighting */
 DIV.RadMenu_pdeMainMenu .rmItem .rmLink:hover .rmText {
    COLOR: #EA433A;
    background-color: #B3CACD;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Highlight around main menu text upon entering a submenu */
 DIV.RadMenu_pdeMainMenu .rmItem .rmExpanded {
    BACKGROUND-COLOR: #E5EDED;
}

/* Area directly around text (& text) upon entering a submenu */
 DIV.RadMenu_pdeMainMenu .rmItem .rmExpanded .rmText {
    PADDING-BOTTOM: 1px;
    padding-top: 0px;
    COLOR: #58707E;
}

/* items on expanded (dropped down) menu items */
 DIV.RadMenu_pdeMainMenu .rmItem .rmGroup {
    BACKGROUND-IMAGE: none;
    BORDER: none;
    PADDING-BOTTOM: 2px;
    BACKGROUND-COLOR: #B3CACD;
}

/* area surrounding text on expanded (dropped down) menu items */
 DIV.RadMenu_pdeMainMenu .rmItem .rmGroup:hover .rmText:hover
 {
     background-color:#E5EDED;
 }

/* spacing between items in expandedDown items */
 DIV.RadMenu_pdeMainMenu .rmGroup .rmItem .rmLink:hover {
    BORDER: none;
    MARGIN-TOP: 1px;
    MARGIN-BOTTOM: 1px;
    background-color: #E5EDED;
}

/* submenu items */
DIV.RadMenu_pdeMainMenu .rmGroup .rmItem .rmFocused
{
    padding: 1px;
    padding-left: 0px;
}

Thank you,
jF

[matt Sword]

jF,
thanks for the sample
Style Builder? where is that?

Matt

[Jason Fedler]

Hey Matt,

It's a pretty cool site - still in Beta, but it takes some of the work out of creating your own styles...http://stylebuilder.telerik.com/

jF

[matt Sword]

hey thanks.

I'm checking it out now. I appreciate it.

[Jason Fedler]

Fortunately, I only have one main menu item that has a child menu, so I moved it to the front of the pack and styled the .rmFirst CSS selector. I'd really like to know what selectors reference child menus, though. I've tried .rmGroup .rmExpand and  .rmRootGroup .rmExpand, but they didn't seem to work...

[matt Sword]

JF,

So, I took your advice and looked at the stylebuilder. I downloaded the basic and just started messing with it to get my look and feel.
Forgive me if some of this is obvious.
1 ul.rmRootGroup, and  div.rmRootGroup = Controls all background colors borders etc
2. a.rmlink = controls all colors of menu items even submenu

I had tweaked  .rmItem a.rmLink:hover, .rmItem a.rmFocused, .rmItem a.rmSelected and
 .rmItem a.rmExpanded, .rmItem a.rmExpanded:hover to manipulate the mouse over and selected states

For the submenu stuff I tweaked .rmGroup, .rmMultiColumn, .rmGroup .rmVertical
and
.RadMenu_cranel .rmTopFix,
.RadMenu_cranel .rmBottomFix,
.RadMenu_cranel .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_cranel .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_cranel .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_cranel_Context.rmRoundedCorners ul.rmHorizontal .rmFirst

to modify the color of the drop down links I changed .rmGroup .rmItem a.rmLink

That is all I really did.
I hope this makes sense.

I was making the menus really odd colors so I knew where they were when I was changing them and then made comments in my CSS. I did eventually get there :)

matt

[Kamen Bundev]

Hi Matt,

Check this documentation article for more information on RadMenu CSS class names and what they control. The article is for older RadControls for ASP.NET AJAX versions, but still valid for simple scenarios.

All the best,
Kamen Bundev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Jason Fedler]

Hey Matt,

Do you happen to have a externally browsable link you could share with me? I've made a concession to move the arrow to the first menu item and used rm.First to style accordingly, so it only styles (mostly) correct on the first menu item. For now, it's the only menu item that has a submenu, though, so it's OK. But I would really like to know how to make this work properly.

Thanks,
Jason

[matt Sword]

Jason -

I don't have an external example that is public. I will attach my style sheet and you can use that. You should be able to attach that to the menu control.  Let me know how this works out.
Matt

/* <RadMenu / Simple> */

.RadMenu_cranel ul.rmRootGroup,
.RadMenu_cranel div.rmRootGroup
{
    padding: 1px 0;
    border: 1px solid #91A6BC;
    background-color: #91A6BC; /*Bacground for all menu */
}

/* <Root items> */

.RadMenu_cranel,
.RadMenu_cranel a.rmLink
{
    font: normal 12px/19px "Segoe UI", Arial, sans-serif;
    color: white; /* color for items in menu */
    text-decoration: none;
}

.RadMenu_cranel .rmItem a.rmLink
{
    padding: 1px 12px;
}

.RadMenu_cranel .rmItem a.rmLink .rmText
{
    padding-right: 0;
}
/* custom style */

.RadMenu_cranel .rmItem a.rmLink:hover,
.RadMenu_cranel .rmItem a.rmFocused,
.RadMenu_cranel .rmItem a.rmSelected
{
     background: #CEDAE7; /*selected color */
    border: 1px solid #3F464E;
    padding: 0 11px;
    color:#69829D;

}

.RadMenu_cranel .rmItem a.rmExpanded,
.RadMenu_cranel .rmItem a.rmExpanded:hover
{
    background: #CEDAE7; /* mouse over events */
    border: 1px solid #3F464E;
    padding: 0 11px;
}

.RadMenu_cranel .rmItem a.rmDisabled,
.RadMenu_cranel .rmItem a.rmDisabled:hover
{
    color: #7d7d7d;
    background-color: transparent;
    border: 0;
    padding: 1px 12px;
}

.RadMenu_cranel img.rmLeftImage
{
    margin: 2px 2px 0 0;
    padding-bottom: 3px;
}

/* </Root items> */


/* <Submenu items> */

.RadMenu_cranel .rmGroup,
.RadMenu_cranel .rmMultiColumn,
.RadMenu_cranel .rmGroup .rmVertical
{
    border: 1px solid #616161;
    background: #fff url('Images/rmDropDownStripe.png') repeat-y -1px 0;
}

.RadMenu_cranel .rmTopFix,
.RadMenu_cranel .rmBottomFix,
.RadMenu_cranel .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_cranel .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_cranel .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_cranel_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
{
    background-image: url('Images/rmDropDownStripe.png');
    background-color: #fff;
    background-repeat: repeat-y;
    background-position: -3px 0;
}

* html .rmRoundedCorners_cranel .rmGroup .rmItem,
* html .rmRoundedCorners_cranel ul.rmHorizontal .rmFirst
{
    background-image: url('Images/rmDropDownStripe.png');
    background-color: #fff;
    background-repeat: repeat-y;
    background-position: -3px 0;
}

.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_cranel .rmRoundedCorners .rmGroupColumn .rmItem,
.RadMenu_cranel .rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrap .rmVertical,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_cranel_Context.rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrap .rmVertical
{
    background-image: none;
}

* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmGroup,
* html .rmRoundedCorners_cranel .rmScrollWrap .rmItem,
* html .rmRoundedCorners_cranel .rmHorizontal .rmItem,
* html .rmRoundedCorners_cranel .rmScrollWrap .rmVertical
{
    background-image: none;
}

.RadMenu_cranel .rmRoundedCorners .rmGroupColumn
{
    background-color: #fff;
}

.RadMenu_cranel .rmBottomLeft,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_cranel_Context.rmRoundedCorners ul.rmGroup,
.RadMenu_cranel .rmRoundedCorners ul.rmGroup,
.RadMenu_cranel .rmRoundedCorners .rmMultiColumn
{
    background-image:  url('Images/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .rmRoundedCorners_cranel .rmScrollWrapContainer,
* html .rmRoundedCorners_cranel .rmGroup ul.rmGroup,
* html .rmRoundedCorners_cranel ul.rmGroup
{
    background-image:  url('Images/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadMenu_cranel .rmTopRight,
.RadMenu_cranel .rmBottomRight
{
    background-image:  url('Images/rmRoundedRight.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadMenu_cranel .rmTopFix,
.RadMenu_cranel .rmBottomFix,
.RadMenu_cranel .rmRoundedCorners .rmGroup .rmFirst,
.RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmFirst,
.rmRoundedCorners_cranel .rmGroup .rmFirst
{
    border-color: #616161;
}

.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}

* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmTopFix,
* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}

.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}

* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmTopArrow,
* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmBottomArrow,
* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmLeftArrow,
* html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}

.RadMenu_cranel li.rmTopFix,
.RadMenu_cranel li.rmBottomFix
{
    background-position: -4px 0;
}

.RadMenu_cranel_rtl .rmBottomLeft,
.RadMenu_cranel_rtl .rmRoundedCorners ul.rmGroup,
.RadMenu_cranel_rtl .rmRoundedCorners .rmMultiColumn,
.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_cranel .rmScrollWrapContainer .rmBottomLeft,
.rmRoundedCorners.RadMenu_cranel_Context_rtl ul.rmGroup,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer
{
    background-image: url('Images/rmRoundedLeft_rtl.png');
}

.RadMenu_cranel_rtl .rmTopRight,
.RadMenu_cranel_rtl .rmBottomRight
{
    background-image: url('Images/rmRoundedRight_rtl.png');
}

.RadMenu_cranel_rtl li.rmTopFix,
.RadMenu_cranel_rtl li.rmBottomFix,
.RadMenu_cranel_rtl .rmRoundedCorners .rmGroup .rmItem,
.rmRoundedCorners.RadMenu_cranel_Context_rtl .rmGroup .rmItem
{
    background-position: 101% 0;
}

.RadMenu_cranel .rmGroup .rmHorizontal
{
    background: #fff;
}

.RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.rmRoundedCorners_cranel .rmScrollWrapContainer li.rmItem
{
    background: none;
}

.RadMenu_cranel .rmGroup .rmItem a.rmLink
{
    padding: 1px;
    margin: 1px 0;
    color:#69829D;
}

.RadMenu .rmGroup .rmItem .rmLeftImage
{
    margin: 2px 0 0 6px;
}

* html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; }
*+html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; }

.RadMenu_cranel .rmGroup .rmItem a.rmLink:hover,
.RadMenu_cranel .rmGroup .rmItem a.rmFocused,
.RadMenu_cranel .rmGroup .rmItem a.rmSelected,
.RadMenu_cranel .rmGroup .rmItem a.rmExpanded,
.RadMenu_cranel .rmGroup .rmItem a.rmExpanded:hover
{
    padding: 0;
}

.RadMenu_cranel .rmGroup .rmItem a.rmDisabled,
.RadMenu_cranel .rmGroup .rmItem a.rmDisabled:hover
{
    padding: 1px;
}

.RadMenu_cranel .rmGroup .rmItem a.rmLink .rmText
{
    padding-right: 53px;
}

.RadMenu_cranel .rmGroup .rmHorizontal a.rmLink .rmText
{
    padding-right: 10px;
}

.RadMenu_cranel .rmGroup .rmExpandRight,
.RadMenu_cranel .rmGroup .rmExpandLeft,
.RadMenu_cranel .rmTopArrow,
.RadMenu_cranel .rmBottomArrow,
.RadMenu_cranel .rmLeftArrow,
.RadMenu_cranel .rmRightArrow
{
    background: transparent url('Images/rmExpandArrows.png') no-repeat;
}

.RadMenu_cranel .rmGroup .rmExpandRight { background-position: 100% 0; }
.RadMenu_cranel .rmGroup .rmExpandLeft { background-position: 0 -48px; }
.RadMenu_cranel a.rmLink:hover .rmExpandRight,
.RadMenu_cranel a.rmFocused .rmExpandRight,
.RadMenu_cranel a.rmSelected .rmExpandRight,
.RadMenu_cranel a.rmExpanded .rmExpandRight { background-position: 100% -24px; }
.RadMenu_cranel a.rmLink:hover .rmExpandLeft,
.RadMenu_cranel a.rmFocused .rmExpandLeft,
.RadMenu_cranel a.rmSelected .rmExpandLeft,
.RadMenu_cranel a.rmExpanded .rmExpandLeft { background-position: 0 -72px; }

.RadMenu_cranel .rmTopArrow,
.RadMenu_cranel .rmBottomArrow,
.RadMenu_cranel .rmLeftArrow,
.RadMenu_cranel .rmRightArrow
{
    background-color: #fff;
}

.RadMenu_cranel .rmTopArrow
{
    border-bottom: 1px solid #616161;
    background-position: 50% -95px;
}

.RadMenu_cranel .rmBottomArrow
{
    border-top: 1px solid #616161;
    background-position: 50% -109px;
}

.RadMenu_cranel .rmLeftArrow
{
    border-right: 1px solid #616161;
    background-position: 50% -48px;
}

.RadMenu_cranel .rmRightArrow
{
    border-left: 1px solid #616161;
    background-position: 50% 1px;
}

.RadMenu_cranel .rmVertical li.rmSeparator,
.RadMenu_cranel .rmHorizontal .rmVertical li.rmSeparator
{
    border-left: 0;
    border-right: 0;
}

.RadMenu_cranel .rmVertical li.rmSeparator .rmText,
.RadMenu_cranel .rmHorizontal .rmVertical li.rmSeparator .rmText
{
    background: #616161;
    padding-bottom: 1px;
    margin-top: 2px;
}

.RadMenu_cranel .rmHorizontal li.rmSeparator .rmText,
.RadMenu_cranel .rmVertical .rmHorizontal li.rmSeparator .rmText
{
    background: #616161;
    width: 1px;
    margin-left: 1px;
}

/* <rtl> */

.RadMenu_cranel_rtl .rmGroup,
.RadMenu_cranel_rtl .rmGroup .rmVertical
{
    background-position: 101% 0;
}

.RadMenu_cranel_rtl .rmGroup .rmItem a.rmLink .rmText
{
    padding-left: 53px;
    padding-right: 27px;
}

.RadMenu_cranel_rtl .rmGroup .rmHorizontal a.rmLink .rmText
{
    padding-left: 10px;
    padding-right: 9px;
}

/* </rtl> */

.RadMenu_cranel .rmScrollWrap .rmVertical
{
    border: 0;
}

/* </RadMenu / Simple> */

[Jason Fedler]

Thank you, sir. I shall take a look!

[matt Sword]

Jason -

Did you ever get your CSS figured out?

Matt

[Jason Fedler]

Hey Matt,

Thanks for keeping me honest. haha
And to continue to be honest, I haven't worked with it as I've been side-tracked with some other coding stuff... I will definitely keep this forum as the log of my work, though, and I *really* appreciate your help! I did notice, though, that it is not rendering quite right in IE8...but we're targeting IE7 for now...

Jason