It is possible to make a menu with images before and after the text in tha NAV object. I will here show how you can do it in ascx mode. However you should use the html method in my opinion. (however some new functions in the menu is not included in the core for the html method I asume there is no interest to make this from the Corp) A working example:
<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal"
CSSNodeRoot="navmenu_rootitem"
CSSNodeHoverRoot="navmenu_rootitem_hover"
CSSNodeSelectedRoot="navmenu_rootitem_selected"
CSSBreadCrumbRoot="navmenu_rootitem_selected"
CSSContainerSub="navmenu_submenu"
CSSNodeHoverSub="navmenu_itemhover"
CSSNodeSelectedSub="navmenu_itemselected"
SeparatorLeftHTML="<span class="navmenu_sepleft"> </span>"
SeparatorLeftHTMLActive="<span class="navmenu_seplefton"> </span>"
SeparatorRightHTML="<span class="navmenu_sepright"> </span>"
SeparatorRightHTMLActive="<span class="navmenu_seprighton"> </span>"
SeparatorLeftHTMLBreadCrumb="<span class="navmenu_seplefton"> </span>"
SeparatorRightHTMLBreadCrumb="<span class="navmenu_seprighton"> </span>" >
</dnn:NAV>
Corresponding CSS
.navmenu_sepright{
background: url(../images/resepr.gif) no-repeat right;
color:#ffffff;
font-size: 8pt;
font-weight:bold;
text-align:center;
line-height:25px;
padding:12px 6px 12px 0px;
margin-right: 0px;
}
.navmenu_sepleft{
background: url(../images/resepl.gif) no-repeat left;
color:Blue;
font-size: 8pt;
font-weight:bold;
text-align:center;
line-height:25px;
padding:12px 0px 12px 6px;
margin-right:0px;
}
.navmenu_seplefton{
color:#ffffff;
font-size: 8pt;
font-weight:bold;
text-align:center;
line-height:25px;
padding:12px 0px 12px 6px;
margin-right:0px;
background: url(../images/seplon.gif) no-repeat left;
}
.navmenu_seprighton{
background: url(../images/sepron.gif) no-repeat right;
color:#ffffff;
font-size: 8pt;
font-weight:bold;
text-align:center;
line-height:25px;
padding:12px 6px 12px 0px;
margin-right:0px;
}
.navmenu_separator{
color:Blue;
}
/*--------- dnn menu style ----------*/
/* main menu td */
.main_dnnmenu_bar
{
cursor: pointer;
padding: 0px 0px 0px 0px;
height: 25px;
background: transparant;
}
/* Main Menu Normal */
.navmenu_rootitem
{
color: #fff;
font-size: 8pt;
font-weight:bold;
text-align:center;
line-height:25px;
padding:12px 0px 12px 0px;
margin-right:0px;
background: url(../images/remenu_bg.gif) repeat-x left;}
Its not fully tested in all browsers, and if you have other images the css needs some tweaks but its an example.
Jan