Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2010
    Location
    Orlando, FL
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery menu slide down (div height expand), is it possible?

    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!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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 helped me get my head around it all.

    Or some of it at least

    You can have a look here 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.

  • Users who have thanked xelawho for this post:

    tripflex (12-16-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Location
    Orlando, FL
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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 helped me get my head around it all.

    Or some of it at least

    You can have a look here 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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •