What is the most overlooked aspect of most sites? If you said it’s the navigational structure, you’re exactly right. Many web designers spend a considerable amount of time creating great-looking graphics and carefully choosing just the right colors, and then they quickly slap down an inefficient site navigation structure.
A good web designer will tell you that content is the most important aspect of any site. I certainly wouldn’t disagree with that, but I’d give navigational structure the same importance as content. After all, what good is great content if your site’s viewers are unable to locate it?
One of the most popular navigation techniques in use today is the DHTML menu system. You’ve no doubt seen these menus on many sites. When you hover over a particular topic, a menu pops up, allowing you to dig deeper into the site’s content, as shown in Figure 26.1.
Other navigational systems are more appropriate for more complex structures. For example, Microsoft’s MSDN site contains an enormous amount of hierarchical content. The sheer volume of content would quickly overwhelm a menu system such as the one shown in Figure 26.1. In these situations, a tree view is a much better system because it is, by nature, hierarchical. As shown in Figure 26.2, the tree view system works perfectly for a site like MSDN.
Either of these navigation systems is nicely supplemented by a bread crumb system. Remember the story of Hansel and Gretel? Hansel left a trail of bread crumbs along the trail so he and Gretel would be able to find their way back to where they started. The bread crumb navigation system got its name from Hansel’s famous technique, and while it didn’t work out so well for Hansel and Gretel, bread crumbs can make a huge difference for your site visitors. Figure 26.3 shows the use of bread crumb navigation on the MSDN site.
You might be asking yourself at this point just how difficult it is to build one or more of these cool navigation systems. With ASP.NET and Expression Web 3, it’s so easy you likely won’t believe it. ASP.NET offers a Menu
control for creating DHTML menus, a TreeView
control for creating tree view-style navigation systems, and a SiteMapPath
control for easily creating bread crumb navigation systems. You can use each of these controls without writing any code at all, but they all expose advanced functionality as well for those web designers who are more adept at programming.
Chances are that you’re going to want to use a couple of different ASP.NET navigation controls at the same time. For example, you might want to use the Menu
control for your navigational menu system and the SiteMapPath
control to provide bread crumb navigation links. Imagine the nightmare you’d have to deal with if you had to manage the links in each of those controls manually as your site grows and changes!
Fortunately, ASP.NET allows you to define your site’s navigational structure in one place, and then all the navigation controls automatically read that structure to produce your menu, bread crumb links, and tree view nodes. ASP.NET uses a special XML file called a sitemap file for this purpose.
The code in Listing 26.1 shows a typical sitemap file.
Notice that a sitemap file has exactly one root siteMapNode
. All other siteMapNodes
are nested within the root siteMapNode
.
Expression Web 3’s Save dialog doesn’t have a file type specifically for sitemap files. If you select XML as the file type, Expression Web 3 adds an .xml
file extension, thus making the file invalid as a sitemap file. Therefore, you should select All Files in the Save As Type drop-down in the Save dialog when saving your sitemap file.
The easiest way to use a sitemap file is to save it as web.sitemap
in the root directory of your site. As we progress through the rest of this chapter, you’ll get a good idea of how the sitemap file is used to build navigation structure into your site.
Menu
ControlAs I mentioned previously, DHTML menus have become the most common navigational element on the Web these days. Almost every site uses them, and it’s pretty safe to say that all the sites operated by the major players use them. That level of popularity has caused enormous growth in the number of software programs that allow nonprogrammers to create and manage powerful navigation systems using DHTML menus.
Some web designers are moving toward using pure CSS menus instead of DHTML because they are compatible with more browsers. However, pure CSS menus are not quite as robust as DHTML menus.
If you’d like to see a tutorial on creating pure CSS menus, you can view a great one at www.projectseven.com/tutorials/navigation/auto_hide/index.htm.
When it comes to implementing a DHTML menu system in Expression Web 3, you have three choices: You can write your own code, you can use a third-party application to generate the code for your DHTML menus, or you can use a server-side solution such as the ASP.NET Menu
control.
Before we dig deeper into the ASP.NET Menu
control, let’s create a site that will allow us to experiment with it and other navigation controls in ASP.NET:
1. Create a new site.
2. Delete the home page.
3. Create a new ASPX page.
4. Enter the text Home Page
on the page and save it as default.aspx
.
5. Create a new ASPX page.
6. Enter the text Software Page
on the page and save it as software.aspx
.
7. Create a new ASPX page.
8. Enter the text Add-ins Page
on the page and save it as addins.aspx
.
9. Create a new ASPX page.
10. Enter the text Applications Page
on the page and save it as apps.aspx
.
11. Create a new ASPX page.
12. Enter the text Reviews Page
on the page and save it as reviews.aspx
.
13. Create a new ASPX page.
14. Enter the text About Us
on the page and save it as about.aspx
.
15. Create a new ASPX page.
16. Enter the text Contact Us
on the page and save it as contact.aspx
.
17. Create a new XML file.
You can download the completed site for this chapter from the website for this book.
18. Add the code from Listing 26.1 to the file.
19. Choose All Files (*.*) from the Save As Type drop-down.
20. Save the file as web.sitemap
.
For more information on creating a site, see Chapter 2, “Creating, Opening, and Importing Sites.”
Menu
ControlThe web.sitemap
file is a special file that ASP.NET looks for when using navigation controls. If a web.sitemap
file exists in the root of the site, ASP.NET will use it automatically to feed the navigation links in the controls you are using. You don’t have to write any code at all. It just happens automatically.
To see what I mean by this, do the following:
1. Open the default.aspx
page.
2. Make sure you are in Design View.
3. Place the insertion point below the text you entered on the page.
4. Insert a Menu
control onto the page, as shown in Figure 26.4.
5. Click New Data Source from the Choose Data Source drop-down in the Menu Tasks dialog, as shown in Figure 26.5.
6. Select the Sitemap option in the Data Source Configuration Wizard, as shown in Figure 26.6, and click OK.
Save the page and preview it in your browser. Notice that all you can see on the page is a black arrow. If you hover over that arrow, you’ll see the links from the sitemap file you created earlier.
One of the strange things about the ASP.NET sitemap file is that you are required to have exactly one root sitemap node. In the case of Listing 26.1, I created an empty sitemap node to satisfy that requirement. However, that causes the top-level link in the menu to be blank, as shown in Figure 26.7.
The problem of a blank top-level menu item is easily resolved, but it requires you to go into Code View to fix it:
1. If it’s not already open, open default.aspx
.
2. Switch to Code View.
3. Locate the code for the SiteMapDataSource
control. It will look like this:
Expression Web 3 provides IntelliSense support for editing ASP.NET controls. If you place the insertion point right before the closing bracket on the <asp:SiteMapDataSource>
tag and press the spacebar, you will be able to add the ShowStartingNode
attribute using IntelliSense.
4. Change the code in step 3 to this:
5. Save the page.
Now browse the page again and you’ll see a menu system that more closely resembles what you expect. However, it’s not very pretty. Right now it consists of only a few text links. Luckily, you have quite a few options for sprucing up the appearance of a Menu
control.
Menu
ControlWhen it comes to formatting the Menu
control, you have several options. You can use the existing AutoFormat feature if you’d like to format it quickly. You can also use an ASP.NET theme, skin the control using the skinning features of ASP.NET, or use CSS styles.
For a complete discussion of using ASP.NET themes and skins, read my book The Microsoft Expression Web Developer’s Guide to ASP.NET 3.5 from Que Publishing.
The quickest way to format the Menu
control for a better appearance is by using the AutoFormat feature available from the Menu Tasks dialog, as shown in Figure 26.8.
Click the AutoFormat link; the AutoFormat dialog will appear with four formats, as shown in Figure 26.9. You can remove any existing formatting by selecting the Remove Formatting option from the list. Choose a format you find attractive and click OK to apply it.
The Menu
control exposes many properties that can be used to format the control using CSS. The Menu
control uses two kinds of styles:
• Dynamic styles—Styles that apply to menu items that aren’t visible by default. These menu items appear when another menu item is hovered over.
• Static styles—Styles that apply to menu items that are visible by default.
To format a Menu
control using these styles, use the Tag Properties panel to alter the styles. For example, to change the style of dynamic menu items, change the settings for the DynamicMenuItemStyle
property, as shown in Figure 26.10.
For more information on the Tag Properties panel, see Chapter 7, “Editing Tag Properties.”
For more information on using CSS, see Chapter 17, “Creating Style Sheets.”
When you choose to automatically format the Menu
control using the AutoFormat dialog, you are actually just setting some of the CSS properties of the menu. Open the AutoFormat dialog for the menu and select the Simple scheme. Now look at the properties that have been set in the Tag Properties panel. You should see several of the CSS properties set, as shown in Figure 26.11.
You can experiment with the styles available using the Tag Properties panel. Just keep in mind that changing a style for a dynamic item will affect only those items that are not initially visible and will not affect the appearance of any items that are visible when the Menu
control is first loaded.
TreeView
ControlNow that you’ve dug through some of the features of the Menu
control and how to use it on a page, you’ll have no trouble at all using the TreeView
control. In fact, it’s quite similar to the Menu
control and can use the same sitemap file you used with the Menu
control.
To add a TreeView
control to your page:
1. Open default.aspx
.
2. Place the insertion point where you would like the TreeView
control to be inserted.
3. Double-click the TreeView
control in the toolbox to add it to the page.
4. In the TreeView Tasks dialog, select SiteMapDataSource1
from the Choose Data Source drop-down, as shown in Figure 26.12.
Save the page and preview it in your browser. The TreeView
control will display links to pages in your site, as shown in Figure 26.13.
Each link in a TreeView
control is referred to as a node. There can be several types of nodes in a TreeView
control:
• Root node—Each TreeView
contains exactly one root node. The root node is the top-level node. There are no nodes above the root node.
• Parent node—A parent node has one or more nodes nested beneath it. In the TreeView
control in Figure 26.13, the Software node is a parent node.
• Leaf node—A leaf node is any node that has no child nodes. The only node in Figure 26.13 that is not a leaf node is the Software node.
You might be wondering what the root node in Figure 26.13 is. Remember that we configured SiteMapDataSource1
so the root node is not shown. Therefore, the root node for the TreeView
is not shown on the page.
Notice that the Software node has a minus button next to it that can be clicked to collapse the nodes beneath it. You can then click the plus sign to expand the nodes again.
TreeView
ControlThe TreeView
control can be easily formatted using the AutoFormat dialog, just as you did with the Menu
control. However, as shown in Figure 26.14, there are many more choices in the TreeView
control’s AutoFormat dialog.
TreeView
Control’s PropertiesThe TreeView
control also has several unique formatting properties you can set in the Tag Properties panel.
ExpandDepth
Property The ExpandDepth
property controls the number of levels in the TreeViewstyle menu that are initially visible when your page loads. The default value is FullyExpand,
which expands all nodes in the TreeView
control. However, you can specify any number of levels to expand by default by specifying a number for the ExpandDepth
property.
When you set the properties of any ASP.NET control, Expression Web 3 simply adds the property to the control’s tag in Code View. Therefore, you could set properties in Code View instead of using the Tag Properties panel. Expression Web 3 will give you IntelliSense for all properties in Code View.
Notice in Figure 26.13 that the Software node is expanded so you can see the Applications and Add-ins nodes. To configure the TreeView so it is fully collapsed, set the ExpandDepth
property to 0
.
ImageSet
Property As shown in Figure 26.15, the ImageSet
property configures the images used in the TreeView
control. Notice that the values available for this property reflect the AutoFormat options available in Figure 26.14.
NodeIndent
Property The NodeIndent
property configures the number of pixels that nodes are indented. Note that only nodes that are children of other nodes are affected. In the case of the TreeView
control we’re using, only the Applications and Add-ins nodes are affected by the NodeIndent
property.
ShowCheckBoxes
Property The ShowCheckBoxes
property allows you to display check boxes on specific types of nodes. Valid values are None, Root, Parent, Leaf, or All. By showing check boxes for nodes, you can allow users to select multiple nodes in a TreeView
control.
The TreeView
control in Figure 26.16 has a ShowCheckBoxes
property set to Leaf.
ShowExpandCollapse
Property The ShowExpandCollapse
property configures whether the plus and minus buttons are displayed for parent nodes. The TreeView
control shown previously in Figure 26.13 has the ShowExpandCollapse
property set to True
.
ShowLines
Property By default, there are no lines connecting nodes in a TreeView
control. If you’d like lines to be drawn connecting the nodes, set the ShowLines
property to True
(see Figure 26.17).
The TreeView
control provides a full range of CSS styles to make formatting with CSS easy. Figure 26.18 shows the CSS properties available for the TreeView
control.
Just as with the Menu
control, any AutoFormat options you choose for a TreeView
will be applied using the CSS styles for the control. To tweak the configuration of formatting applied using the AutoFormat dialog, use the various style properties for the control.
SiteMapPath
ControlThe SiteMapPath
control improves your site’s navigation by providing users with a bread crumb-style navigation bar, as shown in Figure 26.19.
Unlike the Menu
and TreeView
controls, the SiteMapPath
control doesn’t require you to configure a data source as long as a web.sitemap
file exists in the root of the site. Just drop the control on the page and it will automatically use the data in the sitemap file to create links.
To use the SiteMapPath
control, do the following:
1. Open the addins.aspx
page.
2. Place the insertion point on the page underneath the text you entered when the page was created.
3. Insert a control from the toolbox.
That’s all there is to it. After the SiteMapPath
control is added to the page, it automatically connects to the sitemap file and displays the appropriate links.
SiteMapPath
ControlAs with the other controls we’ve looked at, the SiteMapPath
control can be easily formatted using the AutoFormat dialog available from the SiteMapPath Tasks dialog. The AutoFormat schemes available are identical to the ones available for the Menu
control.
In addition to the AutoFormat schemes, you can use several CSS style properties to affect the appearance of your SiteMapPath
control, as shown in Figure 26.20.
SiteMapPath
PropertiesSeveral properties affect the behavior and appearance of the SiteMapPath
control:
• ParentLevelsDisplayed property
—Controls the number of parent nodes displayed. If this value is set to the default value of -1
, all parent nodes are displayed.
• PathDirection property
—Controls the direction of the SiteMapPath
control. The default value is RootToCurrent,
which displays the root node at the left and the current location at the far right. The other valid setting is CurrentToRoot,
which reverses the order of the nodes.
• PathSeparator property
—Configures the character displayed between nodes. The default is the :
(colon) character.
The ASP.NET navigation controls make building a powerful and dynamic navigation system quite easy, and you can do it without writing a single line of ASP.NET code. You can, of course, significantly add to the functionality of these controls with ASP.NET code, but as you’ve seen in this chapter, it’s not necessary to be a programmer to build perfectly functional site navigation with ASP.NET.
You’ve seen some powerful navigation features in this chapter. To make the best use of these navigation controls, however, you should consider using them with ASP.NET Master Pages.
For more information on using ASP.NET Master Pages, see Chapter 27, “Using ASP.NET Master Pages and User Controls.”
If you use navigation controls in combination with ASP.NET Master Pages, insert the navigation controls on one page only; ASP.NET will automatically add the controls to all your other pages when the pages are browsed. Using this method makes managing your navigation much more efficient because making a change is as easy as changing one page. Without Master Pages, a navigation change would require you to manually update every page that uses the navigation controls.
Note that you can also use Expression Web 3’s Dynamic Web Templates if you choose. For a comparison of using Master Pages versus Dynamic Web Templates, see the sidebar “Master Pages Versus Dynamic Web Templates,” p. 471.
For more information on using Dynamic Web Templates, see Chapter 19, “Using Dynamic Web Templates.”