自定义JQuery Slideout问题的宽度等

Question

我比JQuery更像是一个HTML / CSS人，而且我一直在努力构建这个概念。我想完成它，以便我可以自由发布它作为一个psuedo插件。我很高兴能够给予任何可以给我一点指导的人，我认为它主要是在那里。

---

首先，我的演示位于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：我的身高正常，Matt的一些建议如下。但是，我无法将每个内容选项卡的宽度设置为百分比。我想我可以根据innerWidth的计算将宽度设置为px中的某些东西，但是当我的div应该已经那么宽时，这似乎有点hacky。当我设置为100％时，标签会滑出浏览器的宽度。

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

Answer 1

如果您正在使用JQuery，则应该能够在所选选项卡之后切换选项卡的显示。底部导航是浮动的：左边，我建议更改它，并将整个UL带入与主导航ul相同的div中，然后你应该能够正确地浮动它并开始获得你想要的效果。

如果您将底部UL与主UL相同，您可以尝试将该div的位置设置为相对位置，并将底部UL绝对置于底部：0。这样它总是在你的包装div的底部。

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

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