Collapsing Menu Navigation

If you want to have your menu with expandable sections you can choose this option from the page properties. Collapsing sections are only one level deep but you can have multiple sections per navigation menu.

Setup Navigation Page Properties

The first step in getting your navigation to collapse is to edit your navigation file's page properties.  Make sure you're checked out on the navigation page and then click on the Properties button.

Content Type

In the parameters section of the page properties options you'll find two settings.  The first is the Content Type group that has a field labeled Form Submit Type.  The drop down choice needs to be set to 'General Content'.

Navigation Setup

The next step is to set the option for Navigation Style, found in the Navigation Setup section, to 'with collasping sections'.

page properties with content settings for collapsing menus

Navigation File Setup

You can either use the text editor directly or go into the HTML code depending on your comfort level.  As long as the setup file has been set to collasping menus it will automatically adjust any nested UL (bulleted lists) to become collapsing menus when you publish it.  During the editing process the menu will not collapse so you can more easily manage your content.

Collapsing Menus: Editor Setup

By default the left menu should already have a list started. Click on any of the current items and press return to create a new item on another row.

When you get to the point where you want to make the current item a collapsing menu press the 'Increase Indent' button on the menu.  That will make the currently selected item a child of the element above it.  You'll see the background change to a slightly darker color indicating that the item will be inside a collasping section.

When you save your work and preview it the plus (+) and minus (-) buttons will automatically appear.

Editing for collapsing menu

Collapsing Menus: HTML Setup (optional)

If you prefer to work in HTML code you can edit directly using the source code option from within the editor.  A properly nested UL within an LI will create a collasping menu.

Be sure to have an element in the parent LI and use well formatted HTML so the child UL will display correctly.

When you're done simply press the 'OK' button and the editor will update the text editor with your changes.  Make sure you save the changes from the text editor menu and republish your navigation file.

collapsing menu html view

Publish Changes

Make sure you publish your file after making changes.  Navigation files will update on all pages using them within the current folder.  Collapsing menus are tied to the navigation file iteslf so there's no extra setup work to do on content pages.  You should see the sections appear automatically on exisiting pages.