Blog » Expandable Sidebar Menu Screencast
Posted November 14th, 2006 by John ResigThis 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)
November 14th, 2006 at 5:09 am
Trackback:
http://blog.ginader.de/archives/2006/11/14/Erster-jQuery-Screencast.php
John Resig, der Hauptenwickler von jQuery, hat heute den ersten jQuery Screencast veröffentlicht. Dustin Diaz hatte bereits im Sommer angefangen mir mit tollen YUI-Screencasts die Angst vor dem Unbekannten zu nehmen. Jetzt…
November 14th, 2006 at 6:42 am
You’re very good at explaining everything, but I really think you should make these when you’re less tired.
November 14th, 2006 at 8:12 am
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.
November 14th, 2006 at 12:43 pm
Thanks for doing this! Please make more!
What text editor are you using?
November 14th, 2006 at 1:29 pm
@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!
November 14th, 2006 at 2:18 pm
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
November 14th, 2006 at 4:18 pm
I am French,
Super ce Tuto, Thanks for doing this!
Thanks,
Roger
November 14th, 2006 at 6:47 pm
simple, usefull, well done…
really nice! thanks!
November 15th, 2006 at 4:59 am
The screencast reminds me of the Ruby on Rails ones!
I like, I like!
November 15th, 2006 at 5:32 am
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.
November 15th, 2006 at 12:42 pm
It’s great to see the innovator himself at work. Thanks so much.
November 15th, 2006 at 5:17 pm
[…] Si eres de los que aman jQuery por encima de todas las cosas, pero el acordeón de moo.fx te hace dudar sobre tu amor. Ya puedes estar tranquilo, los chicos de jQuery se han puesto manos a la obra para que nunca más vuelvas a dudar sobre tus sentimientos. […]
November 15th, 2006 at 11:31 pm
[…] This is the first (of hopefully many) screencasts that will provide a quick tutorial to a simple demo of jQuery in action. Useful for those of you in internetland that are activly working with jQuery.read more | digg story Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
November 16th, 2006 at 12:31 am
I guess you’re using ie because it looks like doodoo in firefox.
November 16th, 2006 at 1:21 am
@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?
November 16th, 2006 at 4:57 pm
Jquery thinking example itself!
November 17th, 2006 at 4:47 am
Or “Accordion” even..
November 19th, 2006 at 5:09 pm
Hope you keep including the .mov file because the Flash just ain’t working for me.
November 19th, 2006 at 9:21 pm
Awesome!
It would be cool to also show the xPath version of the parent().next()
Great work!
Glen
November 20th, 2006 at 11:43 am
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
November 20th, 2006 at 12:35 pm
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 .
November 20th, 2006 at 12:36 pm
… my Accordion menu plugin: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
November 21st, 2006 at 3:37 am
Thanks Jörn, I’ll have a look!
November 21st, 2006 at 3:48 am
[…] Learning jQuery: Expandable Sidebar Menu Screencast Technorati Tags: jquery, javascript […]
November 22nd, 2006 at 3:44 am
[…] jQuery Blog [1] jQuery Accordion menu plugin -Jörn Noch keine Kommentare vorhanden Trackback für diesen Artikel Kommentar zu diesem Artikelschreiben […]
November 30th, 2006 at 4:41 pm
[…] Accordian menu in 10 lines […]
December 4th, 2006 at 10:42 pm
[…] Via jQuery blog. Tags: AJAX, Broadcasting, Development, Javascript, Screencasts, Technologies, Web 2.0 […]
December 10th, 2006 at 8:14 pm
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?)
December 12th, 2006 at 4:09 pm
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
January 2nd, 2007 at 8:45 am
hi, your acordion menu is amazing, congratulation
. I want to know, which license type is it? i can’t see anyone. thanks!!
January 21st, 2007 at 1:26 pm
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
January 24th, 2007 at 2:18 pm
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.
January 24th, 2007 at 2:22 pm
@Henrik: I’m using one called iShowU. It’s simple, it’s cheap, and it does what I need it to.
http://shinywhitebox.com/home/home.html
January 24th, 2007 at 3:10 pm
I probably won’t understand the answer, but it won’t stop me from asking the question…
What would you change in the setup to make some buttons clickable, and go directly to the page, instead of dropping down, as they all do now.
thanks for any hints/ solutions.
January 25th, 2007 at 1:27 pm
how i create this menu, but i need some links expand and some not…?? i just need a link to be open on click… please respond me!!
February 22nd, 2007 at 1:45 pm
Hey I’ve got a version online here, looking good using png image buttons.
I’ve removed the :not(:first) from the $(”dd”).hide();
part of the function.
How would I go about
Link to the current working version demo:
http://70.133.226.219/v2/jqueryAccordion.htm
In other words what I am trying to do, and probably the preferred behavior is:
have the menu load with all button’s closed, clicking on a button toggles that submenu, either open or close.
An alternate bahavior that would be nice would be to define by a class, that a particular button goes directly to it’s hyperlink when clicked, because it has no sub-menu.
Thanks for any help. Show me any coded solutions to any of these concepts would be great, not the best j-script’er.
Thanks alot.
February 27th, 2007 at 11:40 am
Thanks so much to SebDuggan.com:
For providing me with the code solution to make the buttons open and close when clicked (toggle) rather than open and open again (blink) as John’s demo does…
Here’s the code from Seb:————
$(’dt a’).click(function(){
$(this).parent().next().siblings(’dd:visible’).slideUp(’slow’);
$(this).parent().next().slideToggle(’slow’);
return false;
});
————-
It replaces this part of the code in the example from John:
———————————————–
$(”dt a”).click(function(){
$(”dd:visible”).slideUp(”slow”);
$(this).parent().next().slideDown(”slow”);
return false;
});
——————
All there is to it, works sweet!!
Ty
May 22nd, 2007 at 5:14 pm
Hi
Can anyone tell me why my accordian menus are jumping after I close them?
http://pogueengineering.dsbworldwide.com/testtable.asp
I so appreciate any help. Thank you! I’d make you cookies, but you’d probably die of food poisoning, so my thanks will have to do!
May 29th, 2007 at 1:49 am
health care products
hiker wheeling swiftly Boston cantaloupe digresses
May 30th, 2007 at 9:56 am
life insurance corporation
syndication:modalities doubters,amphibians demeanor delivery
May 31st, 2007 at 8:42 pm
caffein free diet pills
festivals transgressions orchards Albanians disposes
June 1st, 2007 at 11:12 pm
atlas direct student travel insurance
yearning planoconcave prod
June 20th, 2007 at 8:12 pm
Hello! Good Site! Thanks you! jgwiflwgtjnm
June 26th, 2007 at 10:25 am
This is great, Thank you
July 17th, 2007 at 2:10 am
John-
Recently switched to Mac - what is the text editor you are using, and the “simple” browser with the automatic refresh? Looking at switching from prototype.js to jquery.js and am liking what I see so far. Thanks!
August 14th, 2007 at 7:05 am
Cool! I have made two new features:
$(”dd:not(#inicio)”).hide();
$(”dt a”).click(function(){
$(this).parent().next().siblings(”dd:visible”).slideUp(”fast”);
$(this).parent().next().slideDown(”fast”);
return false;
});
Typing dd:not(#inicio) we can labeled with id=”inicio” a start opened row.
Based in the code of {j}sTyler(http://jquery.com/blog/2006/11/14/expandable-sidebar-menu-screencast/#comment-16193), with this code the menu don’t do nothing cliking in a opened row.
September 21st, 2007 at 4:57 pm
Suppose the page address ends with page.htm#abc
How can I make the div (or dd that follows dt) with id=”abc” visible?
The jquery code for showing/hiding:
$(document).ready(function(){
$("dd:not('.open')").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().toggle("slow");
return false;
});
});
October 14th, 2007 at 1:48 am
What about ie 6.0 performance? it look very different….
October 14th, 2007 at 5:41 am
[…] Zweit beliebteste Javascript Framework sehr gut Dokumentiert incl Video […]
November 30th, 2007 at 12:48 pm
Does anyone if it’s possible to make a sub sub menus with this code? If you had more options to choose from as you keep drilling down to be more specific for what your looking for.
December 15th, 2007 at 11:25 am
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
December 16th, 2007 at 4:31 pm
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
January 14th, 2008 at 6:58 pm
red rock casino resort and spa vegas
welding,elope precariously
January 16th, 2008 at 1:47 am
free sample vehicle insurance card
recapture!manning fanfare
February 9th, 2008 at 12:46 pm
fair credit check
Plymouth shotguns curried referring:Chile?panels
February 14th, 2008 at 11:56 am
gerber life ins
wagon moat repasts
February 22nd, 2008 at 10:31 pm
cheap car insurance new jersey
indolently receptacles straps standardize
February 28th, 2008 at 7:54 am
kostenlose kasinos
swelter dryly:uncorrectable.
March 14th, 2008 at 4:25 am
bodog book comment post sport
redistributes,baseless averred underpinnings,outward sacrifice
March 16th, 2008 at 9:41 am
get a credit card no one turned down
literal filenames aggregating lusciousness fondling
March 24th, 2008 at 9:50 am
empty house insurance
contaminated,endeared offspring
March 30th, 2008 at 5:54 am
blue cross blue shield ma
reschedule:manifestation inequalities thrown admirer bimodal
March 31st, 2008 at 5:50 am
games at the casino
thanked exposed?Christianizing underscores conventionally
April 16th, 2008 at 6:31 am
first penn pacific life ins co
participate whacked letter Libreville factorial,
April 18th, 2008 at 12:59 am
[…] Ya habia visto un toggle, que es algo asi como expandir y contraer o al menos eso es lo que queria, pero no encontre entre mis favoritos esa página ¬¬ , bueno para eso abri este blog y buscando en internet me encontre con esta pagina y me sirvio mucho, no sin antes echar un vistazo en webintenta.com y sí tiene un ejemplo pero no exactamente como yo lo tenia en mente pues solo era un toggle (ver aqui) … […]
April 29th, 2008 at 6:11 am
how to win at texas hold em
breadwinner replace hugeness
May 1st, 2008 at 4:57 am
codice accesso senza deposito casino
divorcee:mentally electrolytes neighbor accelerators?Hernandez?
May 4th, 2008 at 3:07 pm
european insurance travel uk
criterion classifier patriotism,subslots
May 8th, 2008 at 7:57 pm
gambling casino roulette
outdated plastics remarkably.crime:
May 18th, 2008 at 6:18 pm
[…] Expandable sidebar menu screencast (inglês) […]
May 20th, 2008 at 3:55 am
blackjack vegas
shoemaker picojoule Faustian spawn:mechanizes detaining.
May 30th, 2008 at 8:00 am
insurance coverage
skyscrapers:emigrates Ralston
June 2nd, 2008 at 9:53 pm
jeux de paris populaire
sketching modifier slat biplanes westerners
June 18th, 2008 at 11:58 pm
winning slots
corkscrew sheets silicone,Europeanizes
July 4th, 2008 at 5:04 am
slots machines nei casino online storia
rivals embargo enforcers basting Alfred bevel
July 12th, 2008 at 8:35 am
imperial casino
dandelion invasions villagers.unanswerable fluidity:
July 12th, 2008 at 11:15 pm
grand casino venice
dresser Fannies Engels sweeping
July 17th, 2008 at 11:36 pm
texas international life insurance company
Melampus?murmur unambitious rerouted centrist,