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

Forums / Designing & Styling / Horizontal Navigation Appearance

Horizontal Navigation Appearance

6 posts, 0 answered
  1. Jeniffer
    Jeniffer avatar
    5 posts
    Registered:
    21 Dec 2010
    27 Apr 2011
    Link to this post
    Hi Sitefinity Community,

    I badly need your help with regards to styling horizontal navigation. What I need is the selected state to work for this but I don't know what selector to use. I have tried to use .rmSelected for the left tab background whereas .rmSelected .rmText for the right tab background.

    Here's what I have done so far:

    * RadMenu Top Navigation */
    .RadMenu_Sitefinityift .rmHorizontal .rmRootGroup{margin-top:20px;_margin_top:50px; background:#000;}
    .RadMenu_Sitefinityift .rmHorizontal .rmItem{display:inline; list-style-type:none; margin-right:3px; float:left; background:url(../images/nav/tab_right.png) right no-repeat; height:33px; width:158px;}
    .RadMenu_Sitefinityift .rmHorizontal .rmItem:hover{margin-right:3px; float:left; background:url(../images/nav/hover_tab_right.png) right no-repeat; height:33px; width:158px;}
    .RadMenu_Sitefinityift .rmLink{margin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#fff; text-decoration:none; }
    .RadMenu_Sitefinityift .rmLink:hover{margin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none;}
    .RadMenu_Sitefinityift .rmFocused{margin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#113861; text-decoration:none; }
    .RadMenu_Sitefinityift .rmClicked{text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none; }
    .RadMenu_Sitefinityift .rmText{margin-top:0px; display:block;background:url(../images/nav/tab_left.png) top left no-repeat; width:100%; height:33px; vertical-align:top; padding-top:5px;}
    .RadMenu_Sitefinityift .rmText:hover{display:block;background:url(../images/nav/hover_tab_left.png) top left no-repeat; width:100%; height:33px; vertical-align:top; padding-top:5px;}
     
    .RadMenu_Sitefinityift .rmExpanded {text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none; background:#000; }
     
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst, .RadMenu_Sitefinityift .rmSelected{margin-right:3px; float:left; background:url(../images/nav/selected_right.png) right no-repeat; height:33px; width:158px;}
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst .rmText, .RadMenu_Sitefinityift .rmSelected .rmText{margin-top:0px;display:block;background:url(../images/nav/selected_left.png) top left no-repeat; width:100%; height:33px;vertical-align:top; padding-top:5px;}
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst .rmText:hover{display:block;background:url(../images/nav/hover_tab_left.png) top left no-repeat; width:100%; height:33px;vertical-align:top; padding-top:5px;}
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst .rmLink{margin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none;}
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst .rmLink:hover{margin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#113861; text-decoration:none;}

    As you can see, i have to different background for the tab. I used .rmText for the left tab image and .rmItem for the right tab image. How can I apply a selected state design for this? This is what I have done but didn't worked.

    .RadMenu_Sitefinityift .rmHorizontal .rmSelected .rmText{margin-top:0px;display:block;background:url(../images/nav/selected_left.png) top left no-repeat; width:100%; height:33px;vertical-align:top; padding-top:5px;}
    .RadMenu_Sitefinityift .rmHorizontal .rmSelected{margin-right:3px; float:left; background:url(../images/nav/selected_right.png) right no-repeat; height:33px; width:158px;}

    Please I need your help. Thanks
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    27 Apr 2011
    Link to this post
    Hello Jeniffer,

    Here is the CSS for RadTabStrip that fits in your case. A screenshot with the final result is attached. The images that I've used for the example are also attached.

    .RadTabStrip_jeniffer {
        position:relative;
        float:left;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 12px;
        background-color: white;
    }
    .RadTabStrip_jeniffer li.rtsLI {
        margin-right: 1px;
    }
     
    .RadTabStrip_jeniffer a.rtsLink  {
        background-image: url(../Images/menu_middle.jpg);
        color: white;
        padding: 0px;
    }
     
    .RadTabStrip_jeniffer a.rtsLink .rtsOut {
        background-image: url(../Images/menu_left.jpg);
        background-repeat:no-repeat;
        padding: 0px;
        padding-left: 10px;
    }
     
    .RadTabStrip_jeniffer a.rtsLink .rtsIn {
        background-image: url(../Images/menu_right.jpg);
        padding: 0px;
        background-repeat:no-repeat;
        background-position: right;
        padding-right: 10px;
    }
     
    .RadTabStrip_jeniffer a.rtsSelected .rtsIn {background-image: url(../Images/menu_right_selected.jpg);}
    .RadTabStrip_jeniffer a.rtsSelected .rtsOut {background-image: url(../Images/menu_left_selected.jpg);}
    .RadTabStrip_jeniffer a.rtsSelected {background-image: url(../Images/menu_middle_selected.jpg);}


    Regards,
    Jordan
    the Telerik team

  3. Jeniffer
    Jeniffer avatar
    5 posts
    Registered:
    21 Dec 2010
    28 Apr 2011
    Link to this post
    Wow! Thanks a bunch Sir Jordan. ^^ Oh umm..Will this be applicable as well for RadMenu? I noticed you used a RadTabstrip.
  4. gabs002
    gabs002 avatar
    64 posts
    Registered:
    17 Dec 2009
    26 Sep 2011
    Link to this post
    Hello,

    I have some problems with the navigation in IE9.
    I use the horizontal tabstrip navigation. I want to have it right, so my contentplaceholder in the page.master-file says "float: right;". Also the settings of the RadTabStrip says "float:right;", which works fine in FF, IE8,... But in IE9, it's very weird. I set up that the child-items of the menu should show on mouseover. If I choos a menu item on level1, the menu is aligned right, but if I want to choose a menu item on level2, the menu jumps to the left. It's like playing tag and it's very annoying. What can I do to avoid this problem?

    Please see attached images. My settings in the navigation widget and what happens when mouseover and when trying to select a submenu. Like I said, it only happens with Internet Explorer 9 ...so far.

    Thank You,
    Gabriele
  5. gabs002
    gabs002 avatar
    64 posts
    Registered:
    17 Dec 2009
    27 Sep 2011
    Link to this post
    Hello,

    I think I solved my problem. For IE9 I have to set the exact width for the navigation.

    Thanks, Gabriele
  6. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    28 Sep 2011
    Link to this post
    Hi Amazonaspinguin,

     
    That is correct - the width should be set (not only in IE9). Since by default the element has 100% width the float property doesn't affect the position.




    All the best,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
6 posts, 0 answered