当菜单滑块向下时，我希望我的内容被向下推

Question

当我点击“菜单”按钮并且菜单向下滑动时，我希望我的网页内容被下推，我尝试使内容位置相对于没有定义的高度，但它仍然无法正常工作。

我的菜单被包裹在 ... 标签下，并且有 CSS ：

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

我的内容被包裹在 ... 标签和 CSS 下：

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

我使用 jquery 作为菜单，这是文档准备操作：

$(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

只需添加一个 'push' 类来将容器放下，并在菜单折叠时将其移除。

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;
}

不是最好的方法。但我希望它对你有用。

这里是Fiddle link。希望对您有所帮助。

更新

您可以尝试添加 jquery 动画以使其看起来更流畅。

    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.
       });     

        });

    }

这里是fiddle

另一种方法是使用 jquery 在容器和菜单之间动态添加一个 div，设置它的高度并在菜单打开时向下滑动，并在菜单关闭时折叠它。您可以在现有 slideDown 函数的回调部分中有效地执行此操作。

希望这会有所帮助。

Answer 2

稍微调整一下 CSS & HTML ，你就可以实现你所需要的， 不需要修改你的js。

演示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 -->