WebGUI
      Click here to register.
      
YAPC North America 2008

AccordianStyle Menu using Jquery ( v7.4.30 )

User: topsub
Date: 4/2/2008 9:16 pm
Views: 413
Rating: 1    Rate [
|
]

Add an accordian 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

 

v02a - fixed URL issue

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

v01 - first release

--

knowmad.com 



Replies

Re: According Menu using Jquery
User: ning
Date: 4/3/2008 6:36 am
Rating: 1    Rate [
|
]
Status: Approved

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?

 


Re: According Menu using Jquery
User: topsub
Date: 4/3/2008 9:55 am
Rating: 0    Rate [
|
]
Status: Approved

    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 


    Re: According Menu using Jquery
    User: topsub
    Date: 4/3/2008 11:00 pm
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    If anyone could test this again but seems i have successfully added these features requested above.

    Look forward from hearing your feedback.

     

    --

    knowmad.com 


    Re: According Menu using Jquery
    User: Jesse
    Date: 4/4/2008 1:11 am
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    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)


    Re: According Menu using Jquery
    User: topsub
    Date: 4/4/2008 8:21 am
    Rating: 0    Rate [
    |
    ]
    Status: Approved
    • 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 


    Re: According Menu using Jquery
    User: eyecatch
    Date: 4/7/2008 12:30 pm
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    Of the three packages above, which one is the most recent stable version?


    Thanks!


    Re: According Menu using Jquery
    User: ning
    Date: 4/4/2008 7:12 am
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    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.


    Re: According Menu using Jquery
    User: topsub
    Date: 4/4/2008 8:13 am
    Rating: 0    Rate [
    |
    ]
    Status: Approved
    • 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 


    Re: AccordianStyle Menu using Jquery ( v7.4.30 )
    User: ning
    Date: 4/4/2008 10:24 am
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    This works also with WebGUI stable 7.4.26 and 7.5.7


    Re: AccordianStyle Menu using Jquery ( v7.4.30 )
    User: topsub
    Date: 4/7/2008 12:41 pm
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    Thanks for testing that!  Put in the description.

     

    --

    knowmad.com 


    Re: AccordianStyle Menu using Jquery ( v7.4.30 )
    User: pilaf153
    Date: 5/1/2008 4:46 pm
    Rating: 0    Rate [
    |
    ]
    Status: Approved

    It is not working for me on the latest version.  I added 2a


    PreviousBackNext