Hello All,
I am trying to get to grip’s with Separator HTML’S in the menu. Here is what I have.
HTML/VB
<dnn:NAV runat="server" id="dnnNAV"
ProviderName="DNNMenuNavigationProvider"
IndicateChildren="false"
ControlOrientation="Horizontal"
CSSControl="mainMenu"
SeparatorLeftHTML="<img src="images/menuLeft.png" class="MainMenu_LeftIdle" border="0" />"
SeparatorLeftHTMLActive="<img src="images/menuActiveLeft.png" class="MainMenu_LeftActive" border="0" />"
SeparatorRightHTML="<DIV class='MainMenu_RightIdle'> </DIV>"
SeparatorRightHTMLActive="<DIV class='MainMenu_RightActive'> </DIV>"
CSS
/********************************************************************/
/* Menu Styles */
/********************************************************************/
.MainMenu_LeftIdle{width: 5px; height: 40px;}
.MainMenu_LeftActive{width: 5px; height: 40px;}
.MainMenu_RightIdle{background: url('images/menuRight.png') no-repeat; width: 5px; height: 40px;}
.MainMenu_RightActive{background: url('images/menuActiveRight.png') no-repeat; width: 5px; height: 40px;}
/******************************/
/* Main Menu TD */
/******************************/
.mainMenu {background-color:transparent; cursor:pointer; font-size: 16px; vertical-align: top; width:700px;}
/******************************/
/* Main Menu Normal */
/******************************/
.mainMenu .root {padding: 0px 5px 0px 5px; color: #787878; background: url('images/menuInactive.png') repeat-x left top; font-family: Arial, Helvetica, sans-serif; font-size: 16px; float: left; text-align: left; white-space: nowrap;}
/******************************/
/* Main Menu Hover */
/******************************/
.mainMenu .hov {color: #ffffff; background: url('images/menuActive.png') repeat-x left top; }
/******************************/
/* Main Menu Selected */
/******************************/
.mainMenu .sel, .mainMenu .bc {color: #ffffff; background: url('images/menuActive.png') repeat-x left top; }
Please if anyone has any advice, please let me know.
Cheers