Jump to content

Archived

This topic is now archived and is closed to further replies.

illinimatt81

Collapsible Side Navigation

Recommended Posts

illinimatt81

I have a membership part of my website where I have various pages that contain modules (parent) and courses (sub-pages of the modules). 

 

When you are viewing a course page or module page I currently have all of them listed by using a custom menu sidebar widget. As you can see in the linked image http://screencast.com/t/61s3iIfym it is a bit overwhelming how much content there is.

 

One thought to help reduce this is to use some sort of collapsible navigation in the sidebar.

 

Is there a way I could somehow add a collapsible element to each parent in the menu listing http://screencast.com/t/61s3iIfym and have all of the and have the child pages only show when clicked on the parent?

 

For example, Module 1 would show all of the courses within it when clicked on. Same for Module 2 and so on. It would also be great if the current parent to the child page you are on showed all of the options for that. Example - if on a Module 1 course page all of the child pages for module 1 would be displayed by default and everything else collapsed under their parent module.

 

The only other option I can think of is do a custom sidebar for each module's child pages and make them appear as I have described above but that would require navigating away to see the child pages.

 

Looking for any thoughts.

Share this post


Link to post
Share on other sites
Jake

Hi illinimatt81 - The first thing that comes to mind in terms of creating the collapsible elements is the Accordion. See usage examples at http://docs.pagelines.com/tutorials/shortcodes. I think what I would do is use this in conjunction with custom sidebars. So for example, I'd click on the  Module 1 page, and a custom sidebar would display the accordion with the module 1 tab open by default, whereas, the module 2 page would have basically the same sidebar, but tweaked a little bit to have that accordion section open by default instead. Does that make sense?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
illinimatt81

Jake

 

 

The first thing that comes to mind in terms of creating the collapsible elements is the Accordion. See usage examples at http://docs.pagelines.com/tutorials/shortcodes

 

Are you saying try to replicate the side nav as made on Pagelines Docs for this?

 

 

 

 I'd click on the  Module 1 page, and a custom sidebar would display the accordion with the module 1 tab open by default, whereas, the module 2 page would have basically the same sidebar, but tweaked a little bit to have that accordion section open by default instead. Does that make sense?

 

Yes, that makes sense.

Share this post


Link to post
Share on other sites
Jake

Hi illinimatt81 - Now that you mention it, it is a lot like what we've got on the side menu for the docs. But my link was referring to the specific instructions about 3/4 of the way down this page http://docs.pagelines.com/tutorials/shortcodes that contains the code for the Accordion.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
illinimatt81

Hi illinimatt81 - Now that you mention it, it is a lot like what we've got on the side menu for the docs. But my link was referring to the specific instructions about 3/4 of the way down this page http://docs.pagelines.com/tutorials/shortcodes that contains the code for the Accordion.

 

Jake

 

Very good, let me take a look at the accordion and play around with that. It may suit my needs.

Share this post


Link to post
Share on other sites
Jake

Sounds good illinimatt81 - I think it will do the trick for you but let us know if you have any other questions.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
illinimatt81

Jake This works well and is attractive. Just have to create them all now, but I have the template to work from. Also allows me to style with CSS. Thanks!

Share this post


Link to post
Share on other sites
illinimatt81

For the benefit of the thread, here is the finished result:

 

http://screencast.com/t/q9e5oC1nTF

 

Each module is set to open when on a child page of the parent module and the rest expand when clicked upon. Much easier and less overwhelming!

 

I like the two tiered color gradients that seem to be default. I shrank the text of the course links with a simple div and CSS.

 

Many thanks to Jake for the suggestion!

Share this post


Link to post
Share on other sites
Jake

WAHOO illinimatt81! It looks fantastic and I so appreciate you sharing the result.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites

×