Creating clean vertical menus with child pages in WordPress

| February 27, 2012 | 5 Comments

Earlier this week, I was working on a site for a client who required for a left side nav bar. Now normally thats a no-brainer, but this particular menu had a number of child pages included in it. The client wanted the child pages to be visible on entry to the parent and to stay visible only while the visitor was in that section.

Here’s an example of what the client wanted :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

After checking out a few plugins that didn’t quite do the trick, I ended up using a plugin called JQuery Vertical Accordion Menu . It was not only easy to set up and configure, but also worked like a charm, allowing the child pages of  the parents not being viewed to remain hidden, providing a much cleaner looking vertical menu.

A quick look at the options available in the widget will show that you can use any menu created in the custom menu section of your dashboard and configure your sidebar widget in a number of ways.

jQuery Accordion Vertical menu widget options

 

 

 

 

 

 

 

 

 

 

All in all, I have to say I am pretty pleased with this plugin. It saved me a lot of time and did the job exactly as the client wanted it done.

Category: Build, Reviews

  • Aaron

    Are you sure this does exactly what the client wants? There seems to be no way to disable the accordion effect. If you click on a child or parent, the page will begin loading, but the menu will expand/contract à la the accordion effect.

    The reason I’m asking is because I’m looking for the same thing, but this doesn’t quite do what I need it to do. If you have any feedback about this, I would be grateful.

    • http://wpteach.com AlDavis

      It certainly did what we wanted it to do and we didn’t have the issue you mentioned above.I’m not sure if there is a setting change that can fix what you are experiencing.

  • Mike

    Could you please share the css styles that get your vertical menu to look like the above example? I am trying to do the same but none of the built in skins with the jquery vertical accordian menu look like this. Thanks.

  • Ammar
  • http://twitter.com/wordpress_guy The WordPress Guy

    Any way for the child tabs to fly out to the right?

«
»