Site Navigation

Site Structure- logical categories of a website’s pages
Create the site’s structure
Then create the site’s navigation
A Site’s navigation is used to assist user to browse your site
ASP.Net navigation controls:

• Menu
• Treeview
• breadcrumbs

ASP.Net uses a sitemap to document the site’s structure
A sitemap is an XML file
It defines the logical sections of the site
And may tie each section to a URL
After you have your sitemap you can use several ASP.Net controls to navigate the site

• SiteMapPath
• Create a breadcrumb
• A single line of text showing the user their location in the website structure
• TreeView
• Provides a hierarchical view of the site’s structure
• Renders as an expandable/cdollapsible tree
• Menu
• Menu items and subitems

Updating the sitemap immediately updates the navigational controls

Define the sitemap

• Open Visual Studio
• Add a new webform
• Name it navigate.aspx
• Add 4 more aspx pages, name them page1.aspx, page2.aspx,page3.aspx,page4.aspx
• Add text to each page identifying it
• Add a new item
• Select sitemap, it should name it web.sitemap

Put the sitemap in the root directory.
You need to edit this xml file manually

It has a sitemap element
Inside are a couple siteMapNode elements

Each siteMapNode has a title, URL, and description attribute
Add a siteMapNode for each page

Notice the navigate siteMapNode is surrounding the others
A sitemap can be set up in spite of which directories a page may be in

Using Breadcrumb Navigation

The siteMapPath control displays a breadcrumb
You can use it to show the user where they are in the site
It also allows the user to move back to higher levels
You must have a sitemap for this control

• Drag a siteMapPath control to page1.aspx
• Test it

It displays a breadcrumb showing where in the site the user is

• Add a siteMapPath control to each page

Customize the appearance

• Change the path separator property to a pipe symbol

                   

There are 3 types of nodes

• Root Node
• Each siteMapPath has one root node
• Current Node
• Each siteMapPath has one Current node
• The current node matches the page the user is on
• General Nodes
• Rest of the nodes

• Click the smart tag on the siteMapPath control
• Select auto Format
• Pick a different format

            

TreeView

TreeView allows the user to navigate through the entire site
A treeview control requires a siteMapDataSource control which allows the control to automatically get the data for navigation Each node in the tree is rendered as a hyperlink to the particular page

• Add a SiteMapPathControl to the page
• Add a treeView control to the page
• Using the smart tag pick the SiteMapDataSource as the dataSource
• Test it

There are 4 types of nodes in a treeview

• Root Node
• Each siteMapPath has one root node
• Selected Node
• The current node matches the page the user is on
• Parent Nodes
• A node that has children besides the root node
• Leaf Nodes
• Nodes that have a parent but no children

Customizing

Click the autoformat option in the smart tag of the treeView
There are also several property that you can attach a style sheet to

• nodeStyle
• default style of all nodes in the treeView
• HoverNodeStyle
• Style spplied when the user hovers his mouse over a  certain node
• levelStyles
• allows you to apply style info for certain levels of the treeview

Other properties
collapseImageToolTip	Tooltop shown to the user hovering over expand and collapse.You can use {0} in the property to use the nodes text
CollapseImageURL	Image URL for the collapse icon
ExpandImageURL	Image URL for the expand icon
NoExpandImageURL	Image URL for leaf icon
ImageSet	Package of images can be used to define treeView images
NodeIndent	Number of pixels to indent, 20 by default
NodeWrap	Boolean property. If node’s text will wrap. Default is false
ShowExpandCollapse	Boolean. If expand and collapse icons are show, true by default
ShowLines	Boolean. If lines are drawn between each node

The imageSet has a list of packaged images to display next to icons
Choices like: Custom XPFileExplorer Msdn Windowshelp Simple1 and 2 Bulletedlist 1,2,3,4 Arrows News contacts Inbox events faq

Each provide different images for expand, collapse, for nonLeaf nodes and images for nonexpendable and nonCollapsible leaf
You can provide your own images by setting it to custom and providing the URLs to the custom images in the CollapseImageURL, ExpandImageURL and noExpandImageURL properties

Menus

The menu will use the sitemap to display each item and it uses submenus for each item in a lower hierarchy

Add a menu control Configure it to the siteMapDataAccess Control The menu control has both static and dynamic parts The static part is always shown The dynamic part is shown when the user interacts with it StaticDisplayLevels property can be used to control how many levels display Set the staticDisplayLevels to 2 Set the orientation to horizontal

DisappearAfter property controls how long the submenu appears after the mouse leaves it. The default is 500 for .5 seconds

Appearance of the Menus
The names of the properties start with either static or dynamic

Menu Control Properties
DynamicEnableDefaultPopOutImage StaticEnableDefaultPopOutImage	If an image is displayed to show an item is a submenu. Default is true
DynamicItemFormatString StaticItemFormatString	Text of the menu Item. You can use {o} to include the menu item’s sitemap value
DynamicPopOutImageTextFormatString StaticPopOutImageTextFormatString	Tooltip to display for the pop out. Can use {0}
DynamicPopOutImageURL Static PopOutImageURL	url of your image if you want to use an image instead of an arrow
StaticSubMenuIndent	Indentation between static menu item and its static submenu
Orientation	Vertical or horizontal
DynamicHorizontalOffset DynamicVerticalOffset	Offset in pixelsbetween the right border of a menu and the left border of its submenu item
ItemWrap	If text in a menu item should be wrapped. Default is false