Printable View
I've been searching for a while for a slidedown menu.
I found few of those, but they all were just like with buttons "SlideUp" and "SlideDown".
What I'd like it to do, is that once you click on the button, for example "Home", it'll slide down the text set up for Home. Once you've clicked Home and you click on next button, for example "About us", it'll slide the Home text away and slide new text for About us.
Anyone got anything like this?
For a smooth sliding effect you'd best be looking at jQuery. It's easy *from what I've heard* and there are tuts around.
For a simple "on/off switch" you can use easy JavaScript with "element.style.display = "block"; for opening and element.style.display = "none"; for closing"
Eh, don't forget jQuery is just JavaScript behind a framework. JavaScript can be much more efficient without jQuery.
Most jQuery developers spend way too much code to get where they want to be. In turn, the custom drop-down needs to be coded with jQuery functions; jQuery functions needs to be coded in JavaScript, your function needs to be coded with both. If made in JavaScript, it's likely just one function.
Therefore: "For a smooth sliding effect you'd best be" staying away from frameworks.
I've not much against jQuery, it's very easy to use for beginners in JavaScript- or even advanced JavaScript developers. For an easy, developer-friendly sliding effect, you'd best be looking at a JavaScript Framework (like jQuery).
What it sounds like to me, is that you want "Drop-Down Menus" with a "sliding effect"
You seem to want a quite complicated process, too. Allot of clicking, without navigation happening. As an end-user, when I click "Home", I expect to be taken to the homepage of that web-site. I don't want to see a bunch of options there.
The common way drop-downs are done, is when a user rolls over the "home" button (for instance), more options pop up. When the user rolls out of "home" (or those options) then it disappears. You don't have to think about "when a user clicks on another button..." because there's no clicking. A mouse pointer can't be two places at once (yet), (also when they can, your script won't break doing it this way), so when a user rolls from "home" to "contact", then obviously home options hide, and "contact" options are shown. It's a simple, full-proof, hell, I'll even throw in that it's "multiple-cursor compatible", if one has a computing system like that.. If you have two cursors, you can view two menus at once.. Who knew.
So finally, your answer is at this site:
http://www.leigeber.com/2008/04/slid...dropdown-menu/
[Demo]
http://sandbox.leigeber.com/dropdown/dropdown.html
No JavaScript framework needed, and there's no need for "customizing" the JavaScript around your navigation, which is very tacky. Just follow the author's directions for installing it and integrating it with your site. (you need the JS function, and you need to build your drop-downs in a sort-of "unique" way, with this particular source.)
Try it and tell us how it works, or if you have issues installing it, etc. :thumbup1:
Oh sorry then :p:
It's just that I remember foxx (I believe?) saying that jQuery is really easy to use for this kinda stuff+more.
i think what your looking for is a Scroll to Element sniplet.
I would suggest Mootools framework.
here is a sample: http://davidwalsh.name/dw-content/mo...hscroll.php#c4
u can also try different things like slideto element ID or have a container slide it's contents.