隐藏/显示宽度增加/减少的菜单

时间:2013-09-23 08:46:45

标签: jquery html css

我有以下内容。它的工作正常,但我想在隐藏.sidebarmenu时增加.table的大小。我怎样才能做到这一点?? THIS IS WHAT I HAVE

HTML:

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
    This should go left
</div>
<div class="table">
</div>

JQuery的:

$(document).ready(function () {
    $('#showmenu').click(function () {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
        if (hidden) {
            $('.sidebarmenu').animate({
                left: '0px'
            }, 500)
        } else {
            $('.sidebarmenu').animate({
                left: '-200px'
            }, 500)
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});

CSS:

.sidebarmenu {
    position:relative;
    float:left;
    height:500px;
    width:200px;
    background:red;
    left:0px;
}
.table {
    height:500px;
    width:300px;
    background:pink;
    float:left;
    left:20px;
}

4 个答案:

答案 0 :(得分:1)

我建议你改变你的HTMl标记以及你的CSS。 看看这个:http://jsfiddle.net/a2v5J/5/

我添加了wrap并将菜单的位置更改为absolute,同时向padding元素添加table 200px。

<强> HTML

<div id="wrap">
    <div class="sidebarmenu">This should go left</div>
    <div class="table"></div>
</div>

<强> CSS

#wrap {
    float:left;
    position:relative;
}

.sidebarmenu {
    position:absolute; /*added*/
    float:left;
    height:500px;
    width:200px;
    background:red;
    left:0px;  /*added*/
    top:0;/*added*/
}

.table {
    height:500px;
    width:300px;
    background:pink;
    float:left;
    padding-left:200px;   /*added*/
}

更新

生活演示:http://jsfiddle.net/a2v5J/18/

我为.table元素添加了两个动画,以便更改其widthpadding属性。

$('.table').animate({
     paddingLeft: '0px',
      width: '500px'
}, 500);

//.....

$('.table').animate({
     paddingLeft: '200px',
     width: '300px'
}, 500);

答案 1 :(得分:1)

我改变了你的代码,以便做你想做的事。 http://jsfiddle.net/a2v5J/28/

<强> HTML

     <button id="showmenu" type="button">Hide menu</button>

     <div id="sidemenu" class="sidemenu"> <!-- This is the container that resize-->
       <div id="innermenu" class="innermenu"> <!--This is the container to keep the width of the menucontent-->

         <!-- Here you can put whatever you want-->
         <div class="sidebarmenu">
               This should go left
         </div>
       </div>
     </div>

     <div class="table">
         content
    </div>

<强> CSS

  /* This is following your old structure but adds a overflow to hide the menu content when width is 0 */
  .sidemenu { 
        float:left;
        overflow: hidden;
        width: 200px;
        height: 500px;
      }

  /*this must have the desired width, it is going to be hidden by the overflow of the parent*/
  .innermenu {    
        height: 100%;
        width: 200px;
        background: #bcc1cb;
      }

  /*Just added the height to show it more beautiful*/
  .sidebarmenu {
      height: 100%;
  }

  .table{
      height:500px;
      width:300px;
      background:pink;
      float:left;
      left:20px;
      z-index: 10;
  }

<强> JS

$(document).ready(function() {
      $('#showmenu').click(function() {
      var hidden = $('.sidebarmenu').data('hidden');
      $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
          if(hidden){
          /* One gets smaller and one gets bigger*/
          $('.sidemenu').animate({
              width: '200px'
          },500);
          $('.table').animate({
              width: '300px'
          },500)
      } else {
          $('.sidemenu').animate({
              width: '0px'
          },500);
           $('.table').animate({
              width: '500px'
          },500)
      }
      $('.sidebarmenu,.image').data("hidden", !hidden);

      });
  }); 

不要使用定位或边距,而是使用宽度。 我不得不在菜单上添加两个div。 需要保持菜单内容的固定宽度(因此在更改容器尺寸时不会调整大小),外部div用于调整菜单大小并隐藏溢出以隐藏内部菜单

答案 2 :(得分:0)

检查this updated right box alignment

$(document).ready(function() {
    $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
         $('.table').animate({
            left: '20px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)
        $('.table').animate({`enter code here`
            left: '-200px'
        },500)
    }

答案 3 :(得分:-1)

还为.table添加了动画。请检查此fiddle

$(document).ready(function() {
    $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
         $('.table').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)
        $('.table').animate({
            left: '-200px'
        },500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

    });
}); 

更新

检查this(再次更新)

您可以为animate方法添加更多选项

$('.table').animate({
            left: '-200px',
            width: '350px'
        },500)