I've gotten quite a few comments and emails asking for a simple example of a <UL> based menu so I thought I'd take just a minute to post my code. Sorry about the bland color. I'm working in VS2005 now and can't seem to get the CopySourceAsHTML add-in to work properly yet. By the way, this only works for a single level menu (which is all I really needed).
The .aspx code used in the Master Page:
<div id="Nav">
<asp:Repeater ID="Menu" DataSourceID="SiteMapDataSource1" runat="server" EnableViewState="False">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="MenuLink1" NavigateUrl='<%# Eval("URL") %>' runat="server" EnableViewState="false"><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
The Cascading StyleSheet (where the real work takes place).
#nav ul{
float: left;
background-color: #E9E9E9;
border-bottom: 1px solid #666666;
color: #666666;
font-size: 90%;
margin: 0;
width: 90%;
padding: 0;
}
#nav ul li {
display: inline;
list-style: none;
}
#nav ul li a {
float: left;
text-decoration: none;
color: #666666;
background-color: #E9E9E9;
border-right: solid 1px #666666;
padding: .3em 1em;
}
#nav li a:visited {
color: #666666;
background-color: #E9E9E9;
}
#nav ul li a:hover, #nav li a:active {
color: #FFFFFF;
background-color: #999999;
}
#nav div {
float: right;
background-color: #E9E9E9;
border-bottom: 1px solid #666666;
color: #666666;
font-size: 90%;
margin: 0;
width: 10%;
padding: 0;
}
#nav div a {
float: right;
color: #666666;
background-color: #E9E9E9;
padding: .3em 1em;
text-decoration: none;
}
#nav div a:hover, #nav div a:active {
color: #336699;
}
The site map:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Login.aspx" title="Login" description="Login">
<siteMapNode url="~/Default.aspx" title="Home" description="Home" />
<siteMapNode url="~/Admin/Account.aspx" title="Account Status" description="Account Status">
<siteMapNode url="~/Admin/Invoices.aspx" title="View Open Invoices" description="View Open Invoices" />
<siteMapNode url="~/Admin/Users.aspx" title="Manage User Accounts" description="Manage User Accounts" />
<siteMapNode url="~/Admin/Addresses.aspx" title="Manage Addresses" description="Manage Addresses" />
<siteMapNode url="~/Admin/ShippingConfigs.aspx" title="Manage Shipping Methods" description="Manage Shipping Methods" />
</siteMapNode>
<siteMapNode url="~/Orders.aspx" title="Order Status" description="Order Status" />
<siteMapNode url="~/Catalogs.aspx" title="Product Catalogs" description="Product Catalogs" />
<siteMapNode url="~/Basket.aspx" title="Checkout" description="Checkout">
<siteMapNode url="~/Template.aspx" title="Saved Baskets" description="Saved Baskets" />
</siteMapNode>
</siteMapNode>
</siteMap>
The results:
For further reading look at the links in my recent post about Getting Started. As always, please feel free to comment and suggest improvements!
---
Jeff