I am requesting that the menu titles be enclosed in a . This allows for creating graphic menu items that are automatically sized to fit the menu item title.
See www.baydistributing.com for an example. The menu item width adjusts to the text length. Also, watch the menu item width adjust when you use the browser to change the text size. This is one of our older non-dnn sites. We are creating a new dnn site with a similar layout.
I added the span to the page title so the html is correct. But then the span also appears in the url, which is not acceptable to our seo people.
HTML with span tag in page title:
<li id="HouseMenuNavItem511"><a id="HouseMenuNavLink511" href="http://69.89.227.170/easyaccess/spanAboutUsspan/tabid/511/Default.aspx" title="About Us" tabindex="1"><span>About Usspan>a>li>
This extract from skin.css shows how the menu items are styled using four graphics (left/right, plain/highlighted).
#HouseMenuNav li a
{
display: block;
padding: 0px;
margin: 0px;
text-decoration: none;
background: #e1e1e1 url(images/menuItemLeft.jpg) no-repeat top left;
color: #000000;
}
#HouseMenuNav li a span
{
display: block;
padding: 12px 22px 13px 30px;
margin: 0px;
background: transparent url(images/menuItemRight.jpg) no-repeat top right;
}
#HouseMenuNav li#HouseMenuNavCurrentItem a,
#HouseMenuNav li a:hover
{
display: block;
padding: 0px;
margin: 0px;
text-decoration: none;
background: #b60f17 url(images/menuItemLeftHighlite.jpg) no-repeat top left;
color: #ffffff;
}
#HouseMenuNav li#HouseMenuNavCurrentItem a span,
#HouseMenuNav li a:hover span
{
display: block;
padding: 12px 22px 13px 30px;
margin: 0px;
background: transparent url(images/menuItemRightHighlite.jpg) no-repeat top right;
}
The left images are very wide, with a notch in the top left and the arrow. The right images are narrow with a notch in the top right. There is a plain (grey) and highlighted(red) version of each.
I am using House of Nuke Menu version 01.04.01 Beta.
|