Horizontal Navigation Appearance - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Horizontal Navigation Appearance

  • Horizontal Navigation Appearance
  • 266387_tab.jpg
    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 .rmRootGroupmargin-top:20px;_margin_top:50px; background:#000;
    .RadMenu_Sitefinityift .rmHorizontal .rmItemdisplay: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:hovermargin-right:3px; float:left; background:url(../images/nav/hover_tab_right.png) right no-repeat; height:33px; width:158px;
    .RadMenu_Sitefinityift .rmLinkmargin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#fff; text-decoration:none;
    .RadMenu_Sitefinityift .rmLink:hovermargin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none;
    .RadMenu_Sitefinityift .rmFocusedmargin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#113861; text-decoration:none;
    .RadMenu_Sitefinityift .rmClickedtext-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none;
    .RadMenu_Sitefinityift .rmTextmargin-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:hoverdisplay: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 .rmSelectedmargin-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 .rmTextmargin-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:hoverdisplay: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 .rmLinkmargin-top:0px;text-align:center; vertical-align:top; font:bold 17px "Calibri"; color:#2f2f2f; text-decoration:none;
    .RadMenu_Sitefinityift .rmHorizontal .rmFirst .rmLink:hovermargin-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 .rmTextmargin-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 .rmSelectedmargin-right:3px; float:left; background:url(../images/nav/selected_right.png) right no-repeat; height:33px; width:158px;

    Please I need your help. Thanks
  • 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

  • Wow! Thanks a bunch Sir Jordan. ^^ Oh umm..Will this be applicable as well for RadMenu? I noticed you used a RadTabstrip.
  • 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

  • Hello,

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

    Thanks, Gabriele
  • 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