Right-align, separators and a border

14 posts, 0 answers
  1. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 20 Aug 2010 Link to this post

    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.
  2. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 20 Aug 2010 Link to this post

    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.
  3. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 27 Aug 2010 Link to this post

    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
  4. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 27 Aug 2010 Link to this post

    Can I get that function in VB code please?
  5. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 27 Aug 2010 Link to this post

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

    Thanks for all of your help!
  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 27 Aug 2010 Link to this post

    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
  7. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 27 Aug 2010 Link to this post

    Ok great.  Thanks!
  8. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 02 Sep 2010 Link to this post

    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
  9. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 02 Sep 2010 Link to this post

    Also I need the menu centered (top to bottom) in the light green bar.  Right now it's at the top.
  10. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 09 Sep 2010 Link to this post

    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.
  11. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 10 Sep 2010 Link to this post

    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
  12. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 16 Sep 2010 Link to this post

    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.
  13. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 22 Sep 2010 Link to this post

    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
  14. dean.carrefour
    dean.carrefour avatar
    43 posts
    Member since:
    Oct 2006

    Posted 22 Sep 2010 Link to this post

    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.
Back to Top