Horizontal Navigation Appearance
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;.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;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