javascript - jquery div滑动效果与另一个div自动调整宽度

Question

我正在尝试 giva 菜单滑入/滑出效果，以便在用户需要时为主要内容提供更多空间 - 更像是 Google 日历汉堡菜单点击行为。

我正在尝试并排放置两个 div。第一个是菜单，第二个是其他内容。使用 jQuery UI 我正在尝试切换第一个 div 的滑动。

两个问题-

1. 只有当我为第二个 div 指定固定宽度时，我才能将它们并排放置。

   如何让第二个div占用剩余空间？

2. 只有在滑出第二个 div 完成后才调整其宽度。

   如何使宽度平滑增加？

这是代码 https://codepen.io/coder92/pen/Yjomwd

$(document).ready(function(){
	//adds click function to the hamburger menu
	$( "#menu" ).click(function() {
		$(".menuDiv").toggle('slide');
	});
 }); 

.menuDiv{
  background-color: green;
  width:200px;
  float:left;
}
.contentDiv{
  //width:100%;
  width:500px;
  color:white;
  background-color:blue;
  float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<span id="menu"> toggle </span>

<div>
  <div class="menuDiv">
    Menu
  </div>
  <div class="contentDiv">
    <table>
      <tr>
        <td> data </td>
      </tr>
    </table>
  </div>
</div>

提前致谢!

Answer 1

为了流畅的滑动你可以使用

• $(".menuDiv").animate({width: 'toggle'}, 350);

并使数据占据页面的其余部分

• 从 .contentDiv 中移除 float: left;(Float 使元素不占全尺寸)
• 添加 margin: 0 auto;(这使得数据占据页面的全部其余部分)
• 添加 overflow: hidden(这会阻止蓝色在绿色下方)

查看: https://codepen.io/Funce/pen/QBeLOr