1. Navigation Controls MacDonald Ch. 11 MIS 424 MIS 424 Professor Sandvig Professor Sandvig

2. Outline Benefit of Navigation Controls Benefit of Navigation Controls Implementation Implementation Site Maps Site Maps Navigation Controls Navigation Controls 1. TreeView 2. Menu 3. SiteMapPath Page Titles Page Titles

3. Benefit of Navigation Controls Every site needs navigation Every site needs navigation Simple navigation is easy Simple navigation is easy User Control or SSI User Control or SSI Complex navigation is time consuming Complex navigation is time consuming Deep navigation Deep navigation Bread crumbs Bread crumbs Tabs Tabs JavaScript JavaScript Navigation Controls allow “drag & drop” Navigation Controls allow “drag & drop”

4. Implementation Put contols in: Put contols in: master page master page user controls user controls Configure only once Configure only once

5. Site Map XML file XML file Contains site hierarchy Contains site hierarchy siteMapNode siteMapNode represents each page in web site represents each page in web site nest nodes within nodes to represent hierarchy nest nodes within nodes to represent hierarchy Site map – can also use database Site map – can also use database

6. 1. Tree View Control Display site in tree hierarchy Display site in tree hierarchy Many options Many options Appearance Appearance JavaScript open/close JavaScript open/close Throws events when clicked Throws events when clicked Different styles at different levels Different styles at different levels Examples: Examples: TreeView with images & lines TreeView with images & lines TreeView with images & lines TreeView with images & lines TreeView events TreeView events TreeView events TreeView events

7. 2. Menu Control Creates JavaScript muli-level menus Creates JavaScript muli-level menus Vertical or Horizontal Vertical or Horizontal Examples: Examples: Horizontal Horizontal Horizontal Vertical Vertical Vertical Limitations Limitations Usability?? Usability?? Requires scripting to be enabled Requires scripting to be enabled breaks navigation breaks navigation

8. 3. SiteMapPath Control Creates bread crumb navigation Creates bread crumb navigation Most useful! Most useful! Time consuming to program Time consuming to program Examples: Examples: Deep site Deep site Deep site Deep site ISC web site ISC web site ISC web site ISC web site

9. Page Titles Page Titles Page Titles Not automatically pulled from site map Not automatically pulled from site map Include code in master page Include code in master page See handout See handout

10. Summary Navigation Controls Navigation Controls Big time saves Big time saves Usability: Usability: Good: breadcrumbs Good: breadcrumbs Danger: JavaScript menu control Danger: JavaScript menu control