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:

98 thoughts on “Expandable Sidebar Menu Screencast

  1. Can someone look at this code… For some reason the top menu is is smoother then the others… The others open more choppy?

    DL Demo

    $(document).ready(function(){
    $(“dd:not(:first)”).hide();
    $(“dt a”).click(function(){
    $(“dd:visible”).slideUp(“slow”);
    $(this).parent().next().slideDown(“slow”);
    return false;
    });
    });

    body { font-family: Tahoma; font-size: 4px; }
    dl { width: 200px; }
    dl,dd { margin: 0; }
    dt { background: #EBEBEB; font-size: 14px; padding: 5px; margin: 2px; }
    dt a { color: #b22222; }
    dd a { color: #000; }
    ul { list-style: none; padding: 5px; }

    Surgical Services

    Orthopedic Services:
    Reconstructive Surgery
    Hand – Elbow Injuries & Conditions
    Shoulder Injuries & Conditions
    Arthroscopic Surgery
    Total Joint Replacement
    Foot – Ankle Injuries & Conditions
    Sports Medicine
    Cardiovascular Services:
    Peripheral Angiogram
    Endovascular Atherectomy

    Podiatry & Wound Services

    Podiatry and Wound Services

    Gynecological Services

    Gynecological Services

    Imaging Services

    Radiology
    Magnetic Resonance Imaging (MRI)
    Computerized Tomography (CT)

    Rehabilitation Services

    Physical Therapy
    Occupational Therapy
    Speech Therapy

  2. Pingback: red rock casino resort and spa vegas

  3. Pingback: fair credit check

  4. Pingback: gerber life ins

  5. Pingback: cheap car insurance new jersey

  6. Pingback: kostenlose kasinos

  7. Pingback: bodog book comment post sport

  8. Pingback: get a credit card no one turned down

  9. Pingback: empty house insurance

  10. Pingback: blue cross blue shield ma

  11. Pingback: games at the casino

  12. Pingback: first penn pacific life ins co

  13. Pingback: Blog eXencial » jquery toggle

  14. Pingback: how to win at texas hold em

  15. Pingback: codice accesso senza deposito casino

  16. Pingback: european insurance travel uk

  17. Pingback: gambling casino roulette

  18. Pingback: Tudo sobre jQuery - Cleiton.net

  19. Pingback: blackjack vegas

  20. Pingback: insurance coverage

  21. Pingback: jeux de paris populaire

  22. Pingback: winning slots

  23. Pingback: slots machines nei casino online storia

  24. Pingback: imperial casino

  25. Pingback: grand casino venice

  26. Pingback: texas international life insurance company

  27. Pingback: short term insurance that covers gallstones surgery

  28. Pingback: play united bonus code

  29. Pingback: how to buy life insurance

  30. Pingback: united services auto insurance

  31. hey, i have modified your script a little bit, but i want the menu if it is clicked open and then click again to just close. I don’t want it to close and then re-open again.

    I tried the code that someone else posted here and with the modifications i made, i couldn’t get it to work, please if you can take a look at what I’ve done and let me know how to modify your code.

    $(document).ready(function() {

    $(“dd:not(‘.open’)”).hide();$(“span”).hide();

    $(“dt a”).click(function () {

    $(“span”).fadeOut(100);

    $(“dd:visible”).slideUp(“slow”);

    $(this).parent().next().slideDown(“slow”, function () {
    $(“span”).fadeIn(600);
    });
    return false;
    });
    });

  32. Pingback: emergency loans no credit check

  33. Pingback: dnb com creditscore

  34. Pingback: is bankruptcy on your file for six years

  35. Pingback: oldchicago casini joining gifts

  36. Pingback: www pokerchamps com

  37. I have one question ,what if i need a dt withought a dd child? my href gets overwritten and doesn´t work. Any ideas? How do i implement an if statement? Thanks a lot for yout tuto!!!! ;)

  38. Clive on said:

    What licence is the code released under? Can it be incorporated in an LGPL project?

  39. BUG FIX

    I noticed that if you click on an already open sub menu it will close then re-open rather than just close as you would expect. I fixed this issue when I adapted it for my needs and believe I can provide the fix for your version.

    If you change the following:

    $(this).parent().next().slideDown(“slow”);

    To
    $(this).parent().next(“:not(:visible)”).slideDown(“slow”);

    It should only slide back down if it has properly closed rather then after it is closing causing the strange re-open on close issue. I ain’t tested this on your version as my version is slightly different but mine is very similiar and the theory remains the same so should work.

    Thanks for the code, it was a great help for the project I am currently working on.

  40. Thank you for the tutorial, John. It’s really a great help… for me.

    A request – can you please remove the spam from the ‘comments’ list? It’s so confusing. It appears like a coded communication like that of Oceans’ 12 movie.

    Thanks in advance.

  41. Pingback: jQuery first steps « Derek Winton

  42. ugly betty on said:

    parent().next() looks very akward.
    don’t like the query syntax anyway.
    it’s ugly.