I want my content to be pushed down when the menu slider down

Question

I want my web content to be pushed down when i click my "menu" button and the menu slides down, I have tried making the content position relative with no defined height but it's still not working.

My menu is wrapped under a ... tag and has the CSS :

#wrapper {margin: 0px auto 0; width: 800px; }

My content is wrapped under a ... tag and the CSS :

.container {
width: 100%;
position: relative;
}

I am using jquery for the menu and this is the document ready action :

$(document).ready(function(){
var menu = $('#menu')
$('#menu-trigger').click(function(event){
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
        $(this).removeClass("open");
    }
    else
    {
        menu.slideDown(400);
        $(this).addClass("open");
    }
}); });

Answer 1

Just add a 'push' class to bring the container down, and remove it when the menu is collapsed.

if (menu.is(":visible"))
    {
        menu.slideUp(400,  function() {
        $(this).removeClass("open");
        $('.container').removeClass("push");           
        });         
    }
    else
    {
        menu.slideDown(400, function() {
        $(this).addClass("open");
        $('.container').addClass("push");            
        });

    }

.push {    
    bottom: -150px !important;
}

Not the best approach. But I hope it does the job for you.

Here is the Fiddle link. Hope it helps.

Update

You could try adding jquery animation to make it look smoother.

    if (menu.is(":visible"))
    {
        menu.slideUp(400,  function() {
        $(this).removeClass("open");
        $( ".container" ).animate({
         bottom: "+=50",    
        }, 1000, function() {
        // Animation complete.
        });              
        });         
    }
    else
    {
        menu.slideDown(400, function() {
        $(this).addClass("open");
        $( ".container" ).animate({
        bottom: "-=50",    
        }, 1000, function() {
        // Animation complete.
       });     

        });

    }

Here is the fiddle

Another approach would be to dynamically add a div between the container and the menu using jquery, set it a height and slide it down when the menu is open, and collapse it when the menu is closed. You would effectively do this in the callback part of your existing slideDown function.

Hope this helps.

Answer 2

With a little bit rectification of CSS & HTML , you can achieve what you required, no need to modify your js .

DEMO http://jsfiddle.net/codingantGit/33W5v/

CSS

<style type="text/css">

#wrapper{margin: 0px auto 0; width: 800px; }

.container {
width: 100%;
position: relative;

}

.frame {
  background: #fff;
  margin-top: 10px;
  padding-left:0;
  padding: 10px;
  height:30px;
  width: 100%;
  /*border-bottom: 1px solid #666;*/
}
#header {
  float: left;
  height: 10px;
  position: absolute;
  width: 100$;
  margin-left:-10px;

}

#menu-trigger {
  float: left;
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 5px;
  position: relative;
  color: #151515;
  outline: none;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

#menu-trigger:hover {
  color: #888888;
}
#menu-trigger span.arrow {
  display: block;
  position: absolute;
  top: 2px;
  right: -15px;
  width: 12px;
  height: 12px;
  background: url(../images/menu-arrow_sprite.png) no-repeat;
}
#menu-trigger.open span.arrow {
  background-position: 0 -12px;
}

#menu {
 background: url("../images/trans-black_50.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 120px !important;
    left: 0;
    margin-top: 4%;
    padding: 20px;
    width: 800px;
    z-index: 1000;
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
}
#menu .column {
  float: left;
  margin-left: 20px;
  width: 240px;
}
#menu .column:first-child {
  margin-left: 0;
}
#menu .column h3 {
  border: none;
  color: #066666;
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 10px;
}
#menu .column ul {
  font-size: .75em;
  list-style: none;
}
#menu .column ul:first-child {
  margin-left: 0;
}
#menu .column ul li {
  /*border-bottom: 1px solid #666;*/
}
#menu .column ul li:first-child {
 /* border-top: 1px solid #666;*/
}
#menu .column ul li a {
  color: #666;
  display: block;
  padding: 10px;
  text-decoration: none;
  transition: padding-left .5s;
  -moz-transition: padding-left .5s;
  -ms-transition: padding-left .5s;
  -webkit-transition: padding-left .5s;
  -o-transition: padding-left .5s;
}
#menu .column ul li a:hover {
  background: #000;
  color: #fff;
  padding-left: 20px;
}
.container {
  width: 100%;
  position: relative;
}
.main {
/*  padding-bottom: 80px;*/
}
.mi-slider {
  position: relative;
  margin-top:0px;
/*  min-height: 490px;*/
}

.mi-slider ul {
    clear: both;
    float: left;
    left: 0;
    list-style-type: none;
    overflow: hidden;
    pointer-events: none;
    /*text-align: center;*/
    width: 100%;
}

</style>

HTML

 <div id="wrapper">
  <div class="frame">
    <div id="header">       
      <a href="#" id="menu-trigger">Meniu<span class="arrow"></span></a>
        <div id="menu">
            <div class="column">
                <h3>Navigare</h3>
              <ul>
                  <li><a href="index.html">Prima pagina</a></li>
                  <li><a href="colectie-apa.html">Colectie Apa</a></li>
                  <li><a href="colectie-fum.html">Colectie Fum</a></li>
              </ul>
            </div>
            <!--/.column-->
        </div>


    <div class="container"> 
      <div class="main">
        <div id="mi-slider" class="mi-slider">
          <ul>
            <li><h4>Colibri</h4></a></li>
            <li><h4>Maci</h4></a></li>
            <li><h4>Cameleon</h4></a></li>
          </ul>
        </div>
    </div>


    <!-- /container -->