Right-align, separators and a border

[dean.carrefour]

I'm trying to tweak my menu.  I have it built and have a sample of what it looks like here:
http://www.crhcf.org/images/menu-sample.jpg

1.  Right now the children are left-aligned and I need them right aligned.  I'm using images for the 3 child items.  

2.  How do I define a separator between the child menu items?  For instance I'd like to have two small white lines between the 3 child items like this:  http://www.crhcf.org/images/menu-sample-2.jpg
Right now it has 3 separators from the body gradient which is not what I want.  I don't want a separator under the last item.

3.  I would also like to define a border around the entire child menu and make it the same width as the dark green portion of its parent.

How do I do these things?  Thanks.

[dean.carrefour]

Actually you can look at the actual page here: http://www.crhcf.org.

I also want to center the buttons from left to right across the page.  There is less of a gap on the left than the right.  is there a way to evenly space them across the page?

Also when I hover over them, my mouse pointer doesn't change into a finger, it stays an arrow, which may make visitors think it's not a clickable item.

[Kalina]

Hello dean.carrefour,

I succeeded to copy the html code, css styles and images from the live URL provided and created a sample page to implement your requirements.

In order to center the menu on the page please override the .RadMenu and .rmRootGroup styles. The appearance of the separator items can be customized via .rmSeparator style and the border can be customized with overriding the .rmGroup style.

div.RadMenu
{
    text-align: center;
}
.rmSeparator
{
    height: 1px;
    background-color: #fff;
}
.rmGroup
{
    border: 1px solid #53682B !important;
}
.rmRootGroup
{
    float: none !important;
    display: inline-block !important; *display:inline!important;
}

You can align the submenu to the right of the parent item handling the OnClientItemOpening event.
Within the event handler you can obtain an instance of the RadMenu slide (the container of the submenu) and change the offset from the left.

function OnClientItemOpeningHandler(sender, args) {

    var item = args.get_item();

    setTimeout(function() {
        var offset = item.get_element().clientWidth - item.get_childListElement().clientWidth;
        $telerik.$(".rmSlide").css("left", offset - 2);
    }, 0);

}

Please find more details at the sample page attached.

More details about RadMenu CSS selectors you can find here.
At this help article you can find more information about RadMenu client-side methods and properties.

Best wishes,
Kalina
the Telerik team

[dean.carrefour]

Can I get that function in VB code please?

[dean.carrefour]

The asterisk in front of *display:inline!important; is a typo right?

Thanks for all of your help!

[Kalina]

Hello dean.carrefour,

The asterisk in front of *display... is correct and is placed there intentionally.

Please note that the OnClientItemOpeningHandler function is a client-side JavaScript function and I am afraid that it cannot be converted to VB. However you can simply use it as it is.

Best wishes,
Kalina
the Telerik team

[dean.carrefour]

Ok great.  Thanks!

[dean.carrefour]

It is closer, but still not exactly what I'm going for.  I'm only working on the About menu right now.  Here is a pic of what it should look like when completed:

http://www.crhcf.org/images/menu-sample.jpg

1.  The top level menu items need to be evenly spaced across the width of the page, still centered, but with small gaps between the parent items.  How do I put the small gaps in?
2.  There need to be separators between the child menu items, a lighter shade of green.  If there are 3 menu items, there need to be 2 separators.  5 menu items, 4 separators.
3.  There is a small light green line under the last menu item.  How do I get rid of that?
4.  The cursor still does't work.

Here is the page so far, using the code examples you provided:
http://www.crhcf.org

[dean.carrefour]

Also I need the menu centered (top to bottom) in the light green bar.  Right now it's at the top.

[dean.carrefour]

I managed to get the menu centered top-bottom.  I took care of item #3, but I still need help with items 1,2 and 4.  I really appreciate all the help so far.

[Kalina]

Hello dean.carrefour,

Please excuse me for the delayed reply.

Regarding issues 1, 2 and 4:
1. You can use a CssClass property of the RadMenuItem and apply some padding using a custom css class.

2.  Please add Separators between RadMenu items and the ".rmSeparator" style will be applied on them. Within this style you can simply change the background color to light green and increase the height.

4.  You can override the ".RadMenu .rmLeftImage" class and apply cursor property like this:

.RadMenu .rmLeftImage
{
    border: 0 none;
    float: left;
    cursor: pointer !important;
}

Please find more details at the sample page attached.
Additionally you can find a lot of  useful hints how to customize RadMenu appearance at our online help.


All the best,
Kalina
the Telerik team

[dean.carrefour]

I appreciate your help.  I've got everything else pretty well the way I need it except for one item.  If you look at the current page here:
http://www.crhcf.org

The menu bar needs to be centered vertically in that light green bar that it's sitting in.  Right now it's aligned to the top and I can't figure out how to change it.  I've tried vertical-align:middle, margin-top:auto and margin-bottom:auto in several different places.  When I look at it in a developer tool, it shows that it's positioned 'relative' and that declaration is in some file named WebResource.axd, but I've looked on my development workstation and on the server and can't find any such file.

[Kalina]

Hi dean.carrefour,

I can suggest you add a top margin at  the div.RadMenu css class:

div.RadMenu {
margin-top:5px;
text-align:center;
}

Let me recommend you get familiar with this useful online tutorial – this will save you a lot of time and efforts.
Additionally – please take a look at our online help resources related to RadMenu appearance customization.

Regards,
Kalina
the Telerik team

[dean.carrefour]

Thanks, that did it.  I had actually fixed it once, since I posted that message, but yesterday I swapped out the header image for an image map of the same image and it broke it again for some reason.  I made the change in the html only, didn't change the css at all.  Anyway, thanks again.