Vertical Sliding Menu

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Vertical Sliding Menu

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Vertical Sliding Menu

Post 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.
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Re: Vertical Sliding Menu

Post 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!
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Vertical Sliding Menu

Post by JellyFish »

I believe this is called an "accordion menu".
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: Vertical Sliding Menu

Post by Kieran Huggins »

http://docs.jquery.com/UI/Accordion

usage + example, and part of jQuery UI to boot!
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Re: Vertical Sliding Menu

Post 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!
Post Reply