html - 动态调整 div 大小

Question

我做了很多研究，但没有去过任何地方。

当滑动菜单从屏幕左侧展开时，我正在尝试找到一种方法来动态调整 div 的大小。

理想情况下，滑动菜单会随着菜单的展开调整 div 的宽度。

有什么建议会很棒吗？

Answer 1

这是您的解决方案的链接：http: //jsbin.com/inayeg/2/edit

如果您不想在悬停时展开菜单，而是在单击时展开菜单，则必须使用 javascript。

为此，只需添加一个按钮，例如 id '#mybutton'，然后添加这个 javascript：

var expandBt = document.getElementById('mybutton');
var menu = document.getElementById('menu');
expandBt.onclick(function() {
  menu.style.width = '15%'; // expand menu
});
// record a counter for clicking collapse/expand, or place another button to collapse.

注意：您当然可以用像素替换百分比。只是不要浮动#main div，否则它将使其宽度适应最小宽度而不是最大宽度。