Hey guys, I want to be able to learn how to create the drop down menu on this website: http://www.change.org/ The drop down menu I'm looking at is when you press on the arrow for causes (located at the top of the page), and it brings down a drop down menu. Is this hard to do? I'm thinking it deals with CSS and Javascript? I want to be able to imitate this without messing with flash. Any suggestions on where I can go to learn how is greatly appreciated! Thanks! hoang17
It's not exactly like what is on that site but you can try this. http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ To only show the submenu when they click change $('#jsddm > li').bind('mouseover', jsddm_open) to $('#jsddm > li').bind(click', jsddm_open) You may be able to mess with the HTML to have more than just the list of options show up. If that isn't what you want there is probably some jQuery plugin that can do it if you search around a bit.
Here's a link you might like, it's very similar to the change.org menu style. http://www.flash-free.org/en/2008/04/05/e24tabmenu-–-menu-desplegable-ajax/
That's really a collapsible panel than dropdown. And it's very easy to do with Jquery. http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Thanks Omer and DrLudicrous! Is AJAX something that will give users a lot of trouble when it comes to compatibility with browsers? I want something that will work with most browsers and that won't need plug-ins to be viewed correctly. Thanks a bunch guys.
thanks LegendZ3. this looks like a great website to learn jQuery. i've primarily done my websites in html and i'm a little scared of stepping out of my comfort zone but i think i'm up for the challenge.
If you stick with a major framework like jQuery (technically not AJAX, but there are AJAX components of it) then users shouldn't have any problems. The people writing the stuff do all of the testing and have most of the bugs and compatibility issues worked out.
Not AJAX ... but ... JavaScript. Most modern browsers support JavaScript, but browser users have an option to turn it off. Also browsers on mobile devices in general do not support JavaScript.
What software do you use to code? Do you use Dreamweaver ? If you use Dreamweaver, look into Spry's. Since their MX versions, Dreamweaver has done "Sprys", which are JavaScript and CSS combinations for effects for interactive objects for your pages. Menu Bar <object width="500" height="405"><param name="movie" value="http://www.youtube.com/v/dS388ghV3pI&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dS388ghV3pI&hl=en&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object> http://www.layersmagazine.com/dreamweaver-spry-collapsing-panel.html (collapsing panel, not exactly what you're asking for, but an example of another canned "Spry" in Dreamweaver) http://www.layersmagazine.com/edit-an-ajax-drop-down-menu-in-dreamweaver.html All design out there has code you can manipulate to later show it like the menu you want, hide it, etc., and most code is easily read so that you can change dimensions, position, etc. Once you see some of these, you'll learn to create your own by just manipulating theirs.
Thank you. Are you a Dreamweaver user, sir ? If so, what version? I have CS3 on the laptop, 2004 on the work PC (I will be upgrading to CS4 soon), and DW8 on the home desktop. I can post snippets I've created... they work with ASP and HTML.
Yep, still using DW8 (among other tools) on my mac workstation, but I'm thinking I'll upgrade to cs4 before the $100 off deal on the design bundle expires at the end of this month. I have a PC or three also, but don't do my web or design work on it. Thought about downloading the 30 day trial today, but got busy with other stuff.
