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

Right-align, separators and a border

13 Answers 144 Views
Menu
This is a migrated thread and some comments may be shown as answers.
dean.carrefour
Top achievements
Rank 1
dean.carrefour asked on 20 Aug 2010, 07:35 PM
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.

13 Answers, 1 is accepted

Sort by
0
dean.carrefour
Top achievements
Rank 1
answered on 20 Aug 2010, 10:52 PM
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.
0
Kalina
Telerik team
answered on 27 Aug 2010, 11:56 AM
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
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
0
dean.carrefour
Top achievements
Rank 1
answered on 27 Aug 2010, 04:06 PM
Can I get that function in VB code please?
0
dean.carrefour
Top achievements
Rank 1
answered on 27 Aug 2010, 04:11 PM
The asterisk in front of *display:inline!important; is a typo right?

Thanks for all of your help!
0
Kalina
Telerik team
answered on 27 Aug 2010, 05:27 PM
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
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
0
dean.carrefour
Top achievements
Rank 1
answered on 27 Aug 2010, 05:57 PM
Ok great.  Thanks!
0
dean.carrefour
Top achievements
Rank 1
answered on 02 Sep 2010, 04:28 PM
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
0
dean.carrefour
Top achievements
Rank 1
answered on 02 Sep 2010, 05:21 PM
Also I need the menu centered (top to bottom) in the light green bar.  Right now it's at the top.
0
dean.carrefour
Top achievements
Rank 1
answered on 09 Sep 2010, 07:23 PM
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.
0
Kalina
Telerik team
answered on 10 Sep 2010, 10:33 AM
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
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
0
dean.carrefour
Top achievements
Rank 1
answered on 16 Sep 2010, 07:14 PM
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.
0
Kalina
Telerik team
answered on 22 Sep 2010, 05:37 PM
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
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
0
dean.carrefour
Top achievements
Rank 1
answered on 22 Sep 2010, 05:44 PM
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.
Tags
Menu
Asked by
dean.carrefour
Top achievements
Rank 1
Answers by
dean.carrefour
Top achievements
Rank 1
Kalina
Telerik team
Share this question
or