javascript - 自定义 JQuery Slideout 宽度问题等

Question

与 JQuery 相比，我更喜欢 HTML/CSS，并且我一直在努力构建这个概念一段时间。我想完成它，以便我可以自由地将它作为伪插件发布。我很高兴感谢任何能给我一点指导的人，我认为大部分都在那里。

<小时/>

首先，我的演示位于 http://demindu.com/sandbox/ .

<小时/>

问题:
1)我试图将高度定义为百分比或使用 window.innerHeight 等，以便 Slideout 使用尽可能多的空间。目前，CSS 中的高度和宽度是通过 px 定义的。

2) 您会注意到，当您单击后面的选项卡之一时，其右侧的选项卡会在页面底部显示为链接。这是因为每个链接都应该完全覆盖其右侧的选项卡。我一直无法解决这个问题，尝试了诸如绝对定位等，但我只是没有想法。

<小时/>

我正在寻求指导，而不是为我创建一切。在这些情况下，我什至不知道从哪里开始研究。

为了节省一些空间:
JS:http://demindu.com/sandbox/js/slideout.js
CSS:http://demindu.com/sandbox/css/style.css
HTML:显然可以在浏览器中查看。

<小时/>

编辑＃1:根据下面马特的一些建议，我的高度正常工作。但是，我无法将每个内容选项卡的宽度设置为百分比。我想我可以根据innerWidth的计算将宽度设置为以px为单位的值，但是当我的div应该已经那么宽时，这似乎有点老套。当我设置为 100% 时，选项卡滑出浏览器的宽度。

我仍然遇到的另一个问题是使所选选项卡右侧的选项卡消失，因此它们只出现在下面的子菜单中。有任何想法吗？基本认为每个选项卡都会滑出到同一个位置。

Answer 1

如果您使用 JQuery，您应该能够在选定选项卡之后切换选项卡的显示。底部导航是 float: left，我建议更改它，并将整个 UL 放入与主导航 ul 相同的 div 中，然后您应该能够将其向右浮动并开始获得您想要的效果。

如果您将底部 UL 放入与主 UL 相同的 div 中，您可以尝试将该 div 的位置设置为相对位置，并将底部 UL 绝对位置设置为 Bottom:0。这样它将始终位于包装器 div 的底部。

我认为您想要实现的目标是完全可能的，而且您正走在正确的道路上。

只是一些想法，希望有帮助。