...

View Full Version : jQuery menu slide down (div height expand), is it possible?



tripflex
12-16-2010, 05:29 PM
Hey guys so i've just started getting into jquery and for my first project i was looking at making a simple sub menu that when the user clicks on the link it will slide down.

Here's a picture before:
http://prntscr.com/1ant5

And here's a picture of what i would like it to look at after the link is clicked:
http://prntscr.com/1ante

Now i spent all night going over examples and code on this website but can't seem to figure out if this is even possible. Here's the thing, all the examples i have found use margin-top: -200px to hide the div until query animates it and makes margin-top 0px.

My issue is that my menu is in the middle of my page so it's not exactly possible to hide it using margin-top.

Does anybody have any other ideas or can anybody point me in the right direction on how i might be able to make this work?

The entire idea behind this is to create a sub menu for a "customer area", so when the user clicks on the customer panel it will animate the sub menu down where they will either have an area to enter username and password to login or it will show customer area menu items.

Now i can handle the login/customer area stuff easily with php, i'm just stuck on getting jquery to somehow animate it.

Does anybody have any suggestions on how i could do this? Maybe hiding the div? Not sure...

Thanks in advance!

xelawho
12-16-2010, 08:51 PM
I could be completely misunderstanding the problem here, but it sounds to me like you need to look at how the div is positioned in your css file. There are a few options and it's a bit confusing at first. This tutorial (http://www.barelyfitz.com/screencast/html-training/css/positioning/) helped me get my head around it all.

Or some of it at least :D

You can have a look here (http://www.xelawho.com/map/) for how I ended up using it - that page is all laid out with divs.

Hope that helps. Otherwise I notice there's an HTML & CSS branch of this forum.

tripflex
12-16-2010, 10:16 PM
I could be completely misunderstanding the problem here, but it sounds to me like you need to look at how the div is positioned in your css file. There are a few options and it's a bit confusing at first. This tutorial (http://www.barelyfitz.com/screencast/html-training/css/positioning/) helped me get my head around it all.

Or some of it at least :D

You can have a look here (http://www.xelawho.com/map/) for how I ended up using it - that page is all laid out with divs.

Hope that helps. Otherwise I notice there's an HTML & CSS branch of this forum.


Turns out all i had to do was set my wrapper overflow to hidden :P

I do appreciate your help though, that's a great tutorial on positioning!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum