Using Lists to Create Collapsible Navigation Bars

Introduction to collapsible navigation bars

Collapsible navigation bars are great ways to help guide visitors to Web pages on your site. They allow the visitor to see a limited number of items to choose from, and then click a plus sign next to the item they want to find out more information about. Collapsible navigation bars are especially helpful on Web sites with many items to navigate to because navigating a long list of items that are not grouped in any way can be frustrating for visitors.
Creating collapsible navigation bars can be complicated and time-consuming, and usually requires expertise in JavaScript. However, you can easily create great-looking collapsible navigation bars with Windows SharePoint Services and Microsoft Office FrontPage 2003.

Example

This Quick Launch navigation bar has 3 headings — Articles, Other Resources, and Sample Sites. When the page that contains this navigation bar is opened, only those headings are listed. When the visitor clicks the link next to a heading, the list of links beneath it expands, and when they click the link on expanded headings, they collapse again.
The Windows SharePoint Services list that was used to create this navigation bar contains 2 fields — Resource and Category. The Resource field contains the page links, and the Category field contains the headings in the list. The Quick Launch navigation bar is created by inserting a Web Part view of the list into the page, then grouping and sorting the list, and then converting it to an XSLT view so that formatting of the list can be perfected.

Creating the collapsible navigation list

Here are the steps we took to create the collapsible navigation list shown in the example section.

1. Create a list in Windows SharePoint Services that contains 2 fields: Resource, and Category. The Resource field should be formatted as a hyperlink, and the Category field can either be a drop-down choice or a text field.
   
   Tip: If you want to experiment with this functionality, you can download this Excel spreadsheet and then create your list from it. See the article entitled Converting an Excel Spreadsheet into a List for more information.
   
   Tip: If you want to create the list from one of the list templates, start with a Links list, then rename the Links field to Resources, then add a field called Category, and then delete the Notes field.
   
2. Open your site created with Windows SharePoint Services in Microsoft Office FrontPage 2003 and then open the page you want to insert the collapsible navigation list into.
3. Click Insert Web Part on the Data menu. The Web Parts task pane opens.
4. Click the name of the list you want to insert into your page, such as "Quick Launch List," and then click the Insert Selected Web Part button. The Web Part is inserted into your page and looks like this:
   
   
   
5. Next, right-click on the list and then select List View Properties. The Data View Details task pane opens.
6. Click the Fields link on the Data View Details task pane. The Displayed Fields dialog box opens.
7. Make sure that the only field that is displayed is the Resource field, and then click OK.
   
   
   
8. Click the Style link on the Data View Details task pane. The View Styles dialog box opens.
   
   
   
   
9. Click the Options tab on the View Styles dialog box, and then make sure that the Show toolbar with options for check box is empty. This removes the toolbar from the view.
10. Click the Sort & Group link on the Data View Details task pane. The Sort and Group dialog box opens.
11. Make sure that the only field in the Sort Order box is Category, that the Ascending radio box is selected, that the Show group header check box is selected, and that the Collapse group by default radio button is selected.
    
    
    
    The list now looks like this:
    
    
    
12. [Optional] If you do not want the headings to read "Category: " before the heading, or if you want to make other formatting changes, you can convert the data view to XSLT view and then make the edits. Right-click on the list, and then select Convert to XSLT Data View. Click and highlight "Category:" and then type Delete to remove that text. If you want to remove the "Resource" heading, click inside that text, then click Select from the Table menu, then click Row, and then click Delete Rows on the Table menu. Additionally, if you want to add some space before the Resource links, click before one of the links and then type Space until there is the right amount of space before the link. Now the list looks like this in the collapsed state:
    
    
    
    

Print this post