By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

DHTML: div animation

P: n/a
I don't need to do anything complicated. All I want to do is to have a
div slide down from underneath a button I have. When i search online,
I find a zillion slide down menu scripts, but they don't work for just
sliding a div.
Can someone please point me in the right direction?
Thanks.

Nov 24 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
I've done this in a cross-browser way. If you mean slide down the way I
think, you need to user the timer functionality in Javascript, with a
loop and a pause time to slow down the positioning of the div. Look for
something that does that and simplify it to your needs. Set the div to
invisible and position absolute at the outset (using CSS) -- it must be
absolute in order to set the z-index to greater than 1, which is
necessary to create the sliding div on top of the page, rather than
pushing the page down as it slides open, which is what happens when its
z-index 0 or 1. Use a user-initiated Javascript event, such as clicking
on or mousing over the button, to trigger the slide down function.

Scott Stirling
Framingham, MA

br********@gmail.com wrote:
I don't need to do anything complicated. All I want to do is to have a
div slide down from underneath a button I have. When i search online,
I find a zillion slide down menu scripts, but they don't work for just
sliding a div.
Can someone please point me in the right direction?
Thanks.
Nov 24 '06 #2

P: n/a
Well,
You could do it really simple with DHTML like so:

1. Make a div and assign it styles and content.
Remember, it must be under the div of the hover-object. This issue gets
more complicated, I may just post the full answer by your request.
<div id="dropDownMenu" style="position: relative; top: pixles from top;
left: pixles from left; visibility: hidden; border-color: black; and
many more styles which I can help you with">Link1<br /><hr /><br
/>Link2<br /><hr /><br />Link3</div>

2. Create a hover-object, another object of your drop-down menu.
This will be going above the drop-down menu.
<div id="hoverObject"
onmouseover="dropDownMenu.style.visibility='visibl e'">Put the mouse
over me!</div>
That's about it, I did not test it so there may be mistakes. Just
E-mail me if you need more help or want me to complete the drop-down
menu.

Omri Shaffer.

Nov 25 '06 #3

P: n/a
Sorry for spam but the z-index option sounds cool eventhough they
should both work the same.

Nov 25 '06 #4

P: n/a
Thanks a lot for the help everybody. I got it working.

Shaffer wrote:
Sorry for spam but the z-index option sounds cool eventhough they
should both work the same.
Nov 27 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.