Page 1 of 1

Vertical Sliding Menu

Posted: Wed Apr 16, 2008 4:18 pm
by emmbec
Hi, is does anyone knows how to create a vertical sliding menu like this one:
http://www.scriptocean.com/template3.html

but with JavaScript, CSS or something more standard (Not Flash obviously :mrgreen: )??

Could you point me to the right tutorial or paste some sample code here?

Thanks!

Re: Vertical Sliding Menu

Posted: Wed Apr 16, 2008 4:28 pm
by matthijs
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Google for "vertical sliding menu" and you'll find many examples. Maybe if you include "unobtrusive javascript" in your search you'll find the better ones. Jquery should have some examples as well. Something like

Code: Select all

 
jQuery(function($) {
    $('#nav li ul').hide();
    var path = location.pathname.substring(1);
    if(path){
        // alert(path);
        $('#nav a[@href$="' + path + '"]').addClass('active').siblings("ul").slideDown();
        $('#nav a[@href$="' + path + '"]').parents("ul").show();
    }
});
 

~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: Vertical Sliding Menu

Posted: Wed Apr 16, 2008 5:27 pm
by emmbec
Pardon my ignorance, but I am not very familiar with JQuery, once I have the JQuery class and imported it to my document, how do I use your code? I will however read some tutorials to learn.

Thanks!

Re: Vertical Sliding Menu

Posted: Wed Apr 16, 2008 8:48 pm
by JellyFish
I believe this is called an "accordion menu".

Re: Vertical Sliding Menu

Posted: Thu Apr 17, 2008 2:18 am
by Kieran Huggins
http://docs.jquery.com/UI/Accordion

usage + example, and part of jQuery UI to boot!

Re: Vertical Sliding Menu

Posted: Thu Apr 17, 2008 8:14 am
by emmbec
matthijs wrote:Google for "vertical sliding menu" and you'll find many examples. Maybe if you include "unobtrusive javascript" in your search you'll find the better ones. Jquery should have some examples as well. Something like

Code: Select all

 
jQuery(function($) {
    $('#nav li ul').hide();
    var path = location.pathname.substring(1);
    if(path){
        // alert(path);
        $('#nav a[@href$="' + path + '"]').addClass('active').siblings("ul").slideDown();
        $('#nav a[@href$="' + path + '"]').parents("ul").show();
    }
});
 
Thanks! It works perfectly!