We help IT Professionals succeed at work.

Expand DIV upward

I'm looking for a solution that would expand a DIV upward from the bottom of a web page.  For example a menu bar that expands upward on click that would reveal menu elements below, then colapses back down. Preferably utilizing scriptaculous functions (i.e. Effect.slideUp), since I have other effects elsewhere using those libraries already in place.  The DIV would have to be styled to slide over any existing elements on the page, which would include images, etc.

Thanks in advance.

P
Comment
Watch Question

Not knowing the code in the scriptaculous function, here is the basic principle --

<DIV zindex="200" id="slideup" onClick="EffectsildeUp();" > menu here </DIV>

That puts it over all other page elements except a flash file, and onClick invokes the SA function called --
"EffectslideUp".  Now you have to decide how to close it?  On mouseOut, or on click again?  If an onClick the second time, you will have to have a second javascript function monitoring the "open" state of the menu.

You may also need to use clearfloat just before the DIV, to position it at the bottom of the page --
see example code attached to show use of clear, and also these --

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://www.webmasterworld.com/css/3248614.htm
<div id="container">
    <div id="header">Header</div>
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
      </div>
<div id="content">Content Here.</div>
  <div class="clearfooter"></div>
</div><!—End Container—>
<div id="footer">Footer Here.</div>

.clearfooter {
height: 330px;
clear: both;
}

Open in new window

Author

Commented:
Thanks I will accept this.  I did some digging and using that premise came up with this function:

    var toggle = true;


    function menu_expand ()
    {
   
    if (toggle) {
        new Effect.Morph('menu', { style: { height: '300px', top:'497px' }, duration: 0.8  });
        toggle=false;
        }
    else {
        new Effect.Morph('menu', { style: { height: '29px', top:'768px' }, duration: 0.8  });
        toggle=true;
        }
    }


onClick basically toggles the menu open & closed - the height of the menu is set to whatever you need it to be.

I also liked the footer trick and incorporated it in the design.  Thanks for all!

P