Expandable Sidebar Menu Screencast
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)
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
If you are losing your hair, you know that the process doesn’t simply affect the way
you look; it can also affect the way you feel about yourself.
Hair Loss Product
Pingback: red rock casino resort and spa vegas
Pingback: fair credit check
Pingback: gerber life ins
Pingback: cheap car insurance new jersey
Pingback: kostenlose kasinos
Pingback: bodog book comment post sport
Pingback: get a credit card no one turned down
Pingback: empty house insurance
Pingback: blue cross blue shield ma
Pingback: games at the casino
Pingback: first penn pacific life ins co
Pingback: Blog eXencial » jquery toggle
Pingback: how to win at texas hold em
Pingback: codice accesso senza deposito casino
Pingback: european insurance travel uk
Pingback: gambling casino roulette
Pingback: Tudo sobre jQuery - Cleiton.net
Pingback: blackjack vegas
Pingback: insurance coverage
Pingback: jeux de paris populaire
Pingback: winning slots
Pingback: slots machines nei casino online storia
Pingback: imperial casino
Pingback: grand casino venice
Pingback: texas international life insurance company
Pingback: short term insurance that covers gallstones surgery
Pingback: play united bonus code
Pingback: how to buy life insurance
Pingback: united services auto insurance
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;
});
});
Pingback: emergency loans no credit check
Pingback: dnb com creditscore
Pingback: is bankruptcy on your file for six years
Pingback: oldchicago casini joining gifts
Pingback: www pokerchamps com
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!!!! ;)
What licence is the code released under? Can it be incorporated in an LGPL project?
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.
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.
Great website, I really discovered it to be good. I am looking forward to visiting once again to discover what is recent.
un post interessant sa m’interresse , merci
Pingback: jQuery first steps « Derek Winton
parent().next() looks very akward.
don’t like the query syntax anyway.
it’s ugly.
Hey John!
Good Tut, but can you please make your movie screens bigger? I had the hardest time following the visuals and couldn’t make out the code at all.
Although this video is a bit dated, it still showed how to use expandable menus to put live into ones website.
Great work folks.
I’m Sorry ! This menu demo is don’t work :(