plainblack.com
Username Password
search
Bookmark and Share

Accordion Menu using Jquery - 3 Levels

Add an accordion style menu to your website.  It will read display folders and if it detects any children under the folder it will wrap the children of the folder in hidden divs that you click on the mother to show and hide the div. It will repeat this until it has no more children and show the url of the asset.

You can change the css as needed for your needs and also adjust the speed at which divs close.

 

Works With: v7.30, v7.4.26, v7.5.7

Others might work but so far just tested with 7.30

 

v03 - Package with examples NEWEST

v02a - fixed URL issue

v02 - Now closes children when you select a new mother or sibling

v01 - first release

--

knowmad.com 

System Requirements

This supports a 3 level deep menu system.

Release Notes for Version .3 (1/31/2009)

 Known Bug:

The last element in the list will be outside of the div and not collaspe. I am aware of this and working to try and find a solution.

Comments
4ning: "
It's a brilliant WebGUI-ized accordion menu! I've tried it on my own site and I like the on-click toggle of submenu very much. Nevertheless, there may be some enhancement:
When a mother page has viewable children and grandchildren, toggle on the submenu and sub-submenu will show the navigation in three levels (mother, children, grandchildren). But when toggle off the mother page while leave the sub-submenu open, the navigation keeps the sub-submenu displayed (thus we see mother and grandchildren). Could you solve this?One of the features for accordion menu is that upon clicking a second mother title the first submenu will be "scrolled up" (toggled off) automatically, thus showing only the submenu of the branch that has been selected. Can it be applied to this template?
 
"
3topsub: "
Thanks for your feedback!

 
When a mother page has viewable children and grandchildren,
toggle on the submenu and sub-submenu will show the navigation in three
levels (mother, children, grandchildren). But when toggle off the
mother page while leave the sub-submenu open, the navigation keeps the
sub-submenu displayed (thus we see mother and grandchildren). Could you
solve this?
I will look into this issue and see if i can find a solution for this.

 
One of the features for accordion menu is that upon
clicking a second mother title the first submenu will be "scrolled up"
(toggled off) automatically, thus showing only the submenu of the
branch that has been selected. Can it be applied to this template?

Good idea i will also look into this, and see what i can come up with. 

--

knowmad.com 
"
3topsub: "
If anyone could test this again but seems i have successfully added these features requested above.

Look forward from hearing your feedback.

 

--

knowmad.com 
"
3Jesse: "
Looks awesome - though unfortunately I didn't have much luck getting it to work for our older WebGUI 7.0.8 website which is a bit of a shame.

It lists the first level of the navigation fine, but doesn't seem to respond to clicks or expand further at all.

My bet is that it's probably something with our site - as I know I've had issues with other bits of javascript on our site - but thought I'd let you know!

-
If my comment is useful, rate me - I can always use the karma! :)
Join us on the #webgui irc channel on freenode! (I use the nick Radix)
"
3topsub: "Yeah, it seems to me that you have successfully added the two
features above. Well done! Now it works well in my three-level
navigation. I like this dynamic style very much.
Awesome! Glad it worked.
But this time it brings up another issue when I use it -- and I
think it's a newly introduced error since it's not in your first
version -- when I click on the lowest level menu title, the link
directs me to edit the page instead of view the page. I think it's due
to the following line in your template: <a href="<tmpl_var page.url>?func=edit;proceed=/home">because when I simply remove the ?func=edit;proceed=/home part, it works well again.
I updated my template to fix this issue. Sorry about that, was messing around with proceed and editing.

 

--

knowmad.com 
"
3eyecatch: "
Of the three packages above, which one is the most recent stable version?


Thanks!
"
3ning: "
Yeah, it seems to me that you have successfully added the two features above. Well done! Now it works well in my three-level navigation. I like this dynamic style very much.


But this time it brings up another issue when I use it -- and I think it's a newly introduced error since it's not in your first version -- when I click on the lowest level menu title, the link directs me to edit the page instead of view the page. I think it's due to the following line in your template:

<a href="<tmpl_var page.url>?func=edit;proceed=/home">

because when I simply remove the ?func=edit;proceed=/home part, it works well again.
"
3topsub: "Looks awesome - though unfortunately I didn't have much luck getting
it to work for our older WebGUI 7.0.8 website which is a bit of a shame.
I haven't used this version of WG yet but i can try to set up that version and look into it. It also might be that new functions were added in this version that aren't in older ones so thats why its not working.
It lists the first level of the navigation fine, but doesn't seem to respond to clicks or expand further at all.
Are you see any Javascript errors or anything?

--

knowmad.com 
"
3ning: "
This works also with WebGUI stable 7.4.26 and 7.5.7
"
3topsub: "
Thanks for testing that!  Put in the description.

 

--

knowmad.com 
"
3pilaf153: "
It is not working for me on the latest version.  I added 2a
"
0topsub: "Working on a new version. Will post when ready.

Sorry guys don't think i got an email about you guys posting."
5topsub: "I still have a bug but i have it working on the latest version I included an example of it working to help figuring out how it works."
1jmack: "Someone got this working under 7.8/7.9?"
0topsub: "jmack are you see errors?"
Downloadaccordion_nav_v03.wgpkg accordion_nav_v03.wgpkg
accordi0n_nav_v01.wgpkg accordi0n_nav_v01.wgpkg
accordion_nav_v02.wgpkg accordion_nav_v02.wgpkg
accordion_nav_v02a.-.wgpkg accordion_nav_v02a.-.wgpkg
LinksNo Support Offered
Screenshotsaccordian_close.jpg accordian_full.jpg accordion_nav_v03-list2.gif accordion_nav_v03-list.gif
Statistics Downloads: 4031
Views: 12728
Rating: 3
Updated: 1/30/2009
Keywords accordion navigation, package Templates
NavigationBack to the Bazaar
© 2017 Plain Black Corporation | All Rights Reserved