Expandable Sidebar Menu Screencast

Posted on by

This is the first (of hopefully many) screencasts that will provide a quick tutorial to a simple demo of jQuery in action. I plan on doing at least 2-3 more based upon the talks that I’ve given lately – hopefully I can trickle those out over the next week(s) or so. (Oh, and sorry if I sound tired – that’s because I am.) Enjoy!



jQuery Demo – Expandable Sidebar Menu on Vimeo

Or: Watch the original (.mov, 3.85MB) video. (I suspect that this version is much clearer – but not everyone supports Quicktime files)

File Downloads:

27 thoughts on “Expandable Sidebar Menu Screencast”

  1. Jason on said:

    You’re very good at explaining everything, but I really think you should make these when you’re less tired. :)

  2. Matt on said:

    Looks good! I look forward to more of these as time goes on.

    On a side note; that type of menu is typically referred to as an “Accordian Menu” rather than an “Expandable Sidebar Menu.” To draw more attention to your screencasts, I’d suggest using the common names for design patterns like that. ;)

  4. John Resig on said:

    @Jason: Duly noted ;-)

    @Matt: Sigh, yes – Accordian menu. At 3:30am everything just becomes “expandable sidebar menus”.

    @Erin: I’m using Subethaedit for the Mac (try the free version). It has real-time collaborative editing and that real-time web preview. I love it!

  5. Rich on said:

    Great Screencast! I’m looking forward to more of these. I’d like to see a screencast on ajax functionalities as well as jQuery form usage.

    Thanks,
    Rich

  9. Joel Birch on said:

    This is great John. I think these screencasts will really help flick the switch of jQuery enlightenment for many people. The one or two web designers that I know are non-scripters and may feel like achieving such a seemingly complex effect is out of their depth. I know that when they see this screencast it will be like an epiphany for them.

  11. Pingback: First jQuery Screencast by John Resig at There was Code; Then there was AJAX!

  13. John Resig on said:

    @zig: I’m not sure what you’re referring to – this screencast demoed the code in both Firefox 2.0 and Safari 2.0. Can you reproduce this result?

  17. Grant Holman on said:

    Great demo, John. Things like this really help simple folk like myself to ‘get’ jquery.

    Quick question: Is it possible to prevent the DD block from sliding up then back down if it is already expanded?

    Cheers
    Grant

  18. Jörn Zaefferer on said:

    Hey Grant,

    you can save a reference to the currently active part of the menu and refer to that to prevent what you mention.

    If you need that and maybe some more features, take a look at my .

  21. Pingback: Weblogger.ch » jQuery: links

  22. jeremy on said:

    to make sure the currently opened dd block doesn;t slide up and down, you can also just check if its open, and then do nothing.

    if its open then $(this).parent().next() will be visible..
    so you could wrap the whole thing in an

    if(!$(this).parent().next().visible()){
    //do the cool stuff
    }

    ** caveat – i’m a jQuery newb, and not sure if .visible() is a property it can return.. (John?)

  23. Gary Sinise on said:

    This is awesome, I read through a lot of the documentation before seeing this screencast and only kind of understood how to implement something like this, seeing the screencast makes it totally clear. Thanks a ton! where’s the donate button again ;-)

  24. coyr on said:

    hi, your acordion menu is amazing, congratulation ;). I want to know, which license type is it? i can’t see anyone. thanks!!

  25. Miejsca on said:

    Could anyone help me with expanding functionality of this script with cookies (remembering states) + some switches to make predefined tabs collapsed/expanded by default?

    I’d like to have similar functionality to that of menu of this site: http://miejsca.org/

    I am willing to pay if needed and then share the code with everyone, please mail me at mikolaj-i [at] o2 . pl

  26. Henrik on said:

    Slightly off topic, sorry for this, but what program or application are you using in this screen cast for editing the files? I’m a PC-dude ‘jumping ship’ to mac since I’ve had enough with spending time dealing with the OS…

    Thanks John, and perhaps all others that might answer my question.