Web Site Navigation Using a SiteMap - Where should we place the menu control?
(Page 4 of 4 )
Since the navigational menu should be available from all pages, the ideal place for the menu control is the Master Page. We need to add a SiteMapDataSource control which runs at the "Server" that extracts site structure related data that feeds a navigational control. We also need to add a navigational control which will look up this data source to navigate through the web pages. We will be adding two controls from the toolbox where they are shown in the next picture.
You may drag and drop them onto the locations shown on the MasterPage.
The design view of this page is shown in the next picture.
The menu control has a large number of properties, both static and dynamic, as well as for interactive display. However its DataSourceID property should match with the SitaMapDataSource's ID Property as shown in the next picture.
<asp:Menu ID="Menu1"
runat="server"
DataSourceID="SiteMapDataSource1" Height="277px"
BackColor="#FFFBD6"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="0.4em"
ForeColor="#990000"
StaticSubMenuIndent="10px">
<StaticMenuItemStyle HorizontalPadding="5px"
VerticalPadding="2px"
Font-Size="Small" />
<DynamicHoverStyle BackColor="#990000"
ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<StaticSelectedStyle BackColor="#FFCC66" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle Font-Size="Medium"
HorizontalPadding="5px"
VerticalPadding="2px" />
<StaticHoverStyle BackColor="#990000"
ForeColor="Maroon" Font-Size="Medium" />
<StaticMenuStyle BackColor="#FFFFC0" BorderColor="#C0C000" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" />
With this association between the menu control and the SiteMapDataSource, the site navigation can be immediately verified as shown in the following two displays. This picture shows the page Coldfusion.aspx. When you hover over the menu you can see the various pages to which you can navigate using this menu. The placement of the menu control and its look may not be aesthetically pleasing, but the idea is to demonstrate the functionality of navigation.
You may navigate to another page, such as Ado.aspx, and you will see the following display in your browser.
Summary
Site navigation is extremly easy to implement using the ASP.NET 2.0 infrastructure consisting of SiteMap, SiteMapDataSource and navigational controls. This can be very useful for those interested in getting an aesthetically pleasing web site up and running in record time. For those of you who used the Site Diagram, the Site Designer and the Navigation Bar controls in Visual InterDev, the functionality provided with in .NET Framework for site navigation should be a Godsend. It must be remembered that site pages not included in the Web.sitemap cannot be reached by the navigation controls unless you take other measures.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
