+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / RadMenu Sprite/ Sliding Door effect

RadMenu Sprite/ Sliding Door effect

7 posts, 1 answered
  1. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    28 Sep 2009
    Link to this post
    I have been trying to examine your Radmenu Examples that use Sprites, but your CSS makes such nice use of shorthand that I cannot figure out what class controls the hover effects.

    I have a very plain looking menu and I am trying to get a "tab effect" with rounded corners upon mouseover. To achieve this I am using the "Sliding Doors" technique where half of the tab is applied to one item and the other half is applied to the item behind it so that it can grow with larger type.

    This CSS works for the most part:

    .RadMenu_VegasOrange .rmTemplate .rmText:hover, 
    .RadMenu_VegasOrange .rmLink:hover, 
    .RadMenu_VegasOrange .rmFocused, 
    .RadMenu_VegasOrange .rmExpanded 
    color#fff
    text-decoration:none
    background:transparent url(images/tab-left.png) bottom left no-repeat
     
    .RadMenu_VegasOrange li.rmItem:hover 
     
    background:transparent url(images/tab-right.png) bottom right no-repeat

    The problem occurs when you put your mouse over a button with child items.  The Javascript delay does not apply to the li.rmItem:hover and you end up seeing only the left part of the Tab while the delay is in effect.

    Any help would be great!  Let me know if you need to see more of the code or a link to the site to better understand the problem.  Thanks!


  2. Kamen Bundev
    Kamen Bundev avatar
    4 posts
    Registered:
    15 Nov 2016
    30 Sep 2009
    Link to this post
    Hi Dan,

    Tha current RadMenu skins make use of normal link hovers to avoid breaking or using javascript where they are not supported (namely IE6, IE7 Quirksmode and IE8 Quirksmode). There's no need to apply the hover to the rmItem element since it is outside the link element and there's already rmText which you can use for that inside rmLink. So, we are using the rmLink element to set the left part of the background and rmText to set the right part. When the user hovers the link, you can set the background with the following selectors:
    .RadMenu_VegasOrange .rmLink:hover,
    .RadMenu_VegasOrange .rmFocused,
    .RadMenu_VegasOrange .rmExpanded

        background: transparent url(images/tab-left.png) bottom left no-repeat; 
    }
    .RadMenu_VegasOrange .rmLink:hover .rmText,
    .RadMenu_VegasOrange .rmFocused .rmText,
    .RadMenu_VegasOrange .rmExpanded .rmText

        color: #fff;
        text-decoration:none;
        background:transparent url(images/tab-right.png) bottom right no-repeat;
    }

    Let me know if this helps.

    Greetings,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Answered
  3. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    30 Sep 2009
    Link to this post
    Ok, this worked for real browsers (Safari, FireFox, IE 7+).  I had to switch the order:

    .RadMenu_VegasOrange .rmLink:hover, 
    .RadMenu_VegasOrange .rmFocused, 
    .RadMenu_VegasOrange .rmExpanded 
    {  
    background:transparent url(images/tab-right.png) bottom right no-repeat
          
    .RadMenu_VegasOrange .rmLink:hover .rmText, 
    .RadMenu_VegasOrange .rmFocused .rmText, 
    .RadMenu_VegasOrange .rmExpanded .rmText 
    {  
        color#fff
        text-decoration:none
        backgroundtransparent url(images/tab-left.png) bottom left no-repeat
    }  

    And I added this to get the child items to stop displaying the tabs:

    .RadMenu_VegasOrange li li .rmLink:hover .rmText, 
    .RadMenu_VegasOrange li li .rmFocused .rmText, 
    .RadMenu_VegasOrange li li .rmExpanded .rmText 
    background-image:none
    }

    .RadMenu_VegasOrange .rmGroup .rmLink,
    .RadMenu_VegasOrange .rmGroup .rmTemplate .rmText
    {
        background-image:none;        
        text-align: left;    
    }
     

    My two remaining issues are:

    1.   IE6 only shows tab-right.png

    2.  The child item background-color hovers do not stretch across the entire width of the container. I am guessing that is because of the 122px width value being applied to rmSlide, but I cannot figure out how to change that value (or what else to do with the CSS to accommodate this value).

    <div class="rmSlide" style="overflow: hidden; visibility: visible; display: none; height: 105px; width: 122px; left: 0px; top: 34px; z-index: 6;"

    Thanks for your help Kamen!!!

  4. Kamen Bundev
    Kamen Bundev avatar
    4 posts
    Registered:
    15 Nov 2016
    01 Oct 2009
    Link to this post
    Hi Dan,

    Do you have a live URL where I can see the hovers, it will be easier to help while seeing the menu in action?

    Kind regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    01 Oct 2009
    Link to this post
    Kamen,

    The site is now live, and I have disabled the test child pages, so unfortunately you cannot currently see the child-menu issue.  Thanks for taking a look!

    http://sites.kiwanis.org/VegasICON2010/




    d a n f i n n e y
    Dan Finney Design, Inc.
    - - - - - - - - - - - - - - - - - - -
    Indianapolis Web Design
    sitefinity@danfinney.com
    317-816-9353
  6. Kamen Bundev
    Kamen Bundev avatar
    4 posts
    Registered:
    15 Nov 2016
    01 Oct 2009
    Link to this post
    Hello Dan,

    This should be enough to fix your IE6 issue. Looks like something based on the hasLayout bugs.
    * html .RadMenu_VegasOrange .rmLink:hover .rmText,
    * html .RadMenu_VegasOrange .rmFocused .rmText,
    * html .RadMenu_VegasOrange .rmExpanded .rmText
    {
        display: inline-block;
    }

    Let me know if that helps and when you have the sub menus in place.

    Greetings,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    08 Oct 2009
    Link to this post
    Just wanted to say thanks Kamen! Marking your post as the answer.

    d a n f i n n e y
    Dan Finney Design, Inc.
    - - - - - - - - - - - - - - - - - - -
    Indianapolis Web Design
    sitefinity@danfinney.com
    317-816-9353
Register for webinar
7 posts, 1 answered