« Add a Twitter Widget | Custom ‘Shop by’ Widget »
ADVANCED: How to Use Collapsing (Accordion) Navigation
By popular demand, we’ve added a collapsing navigation widget. This is an advanced, completely customizable widget that allows you to add multiple levels of navigation that will expand on hover, remain expanded when you’re on a related page, and collapse when you’re not. Nifty, huh? Check out this feature in action on our demo shop and at Venezie Designs.
You can use this widget to create collapsing navigation for anything you’d like – links to other sites, categories within your shop, or your social networking profiles. Note: new categories and pages will *not* automatically be added to the widget. You will need to edit the widget to add new categories as you add them to your shop.
To use this feature, the first thing you’ll need to do is set up a menu. To do so, locate the Menus link under the Appearance menu on the left sidebar.
If this is your first menu, you can just enter the name for the new menu and go on (see the next figure), but if you’ve already done one and want to add a second, you’ll have to click on the + sign next to your first menu.
Enter a new menu name in the space provided, and click Create Menu.
Once the menu has been created, use the Custom Links, Pages, and Categories modules on the left side of the screen to add links to your menu:
- To add a link, enter the URL and link name (text) in the Link module and click Add to Menu.
- To add a Page, check the box for the page(s) you want to add in the Pages module (use the View All and Search tabs as needed) and click Add to Menu.
- To add a Category, check the box for the category/categories you want to add in the Categories module (use the View All and Search tabs as needed) and click Add to Menu.
The links, pages, and categories you’ve entered will show up in the new menu box to the right — you can rearrange them (more on this below), delete them, or change the navigation label.
The navigation label is how the page (or category or link) shows up in your menu — by default it’s the same name as the page (or category or link) had originally, but you can change it by clicking on the link block and typing in the new navigation label.
Once you have added your items to the menu, click the blue Save Menu button on the right.
You can now re-order your links to create the nested navigation you need for the collapsing navigation to work. To do so, drag each link block slightly to the right so that it “nests” underneath, like so:
You can have up to three levels of navigation.
Don’t forget to click the blue Save Menu button when you’re done!
Now you’ll want to add the widget to your sidebar. Locate and click the Widgets link under the Appearance menu on the left sidebar.
From the bank of available widgets, drag the jQuery Accordion Menu widget to the sidebar where you want the collapsing navigation to appear.
Give it a title, select the menu you created above from the Select Menu dropdown, and set the following options:
Click the blue Save button to close.
Maintaining Your Menu
As noted above, new categories and pages will *not* automatically be added to the widget. You will need to edit the widget to add new categories as you add them to your shop. You can add new categories/pages/links to your menu by adding links to the menu as shown above. Don’t forget to save!
