我一直在深入研究更高级的 CSS 和 JQuery 来构建特定的布局，但遇到了一些问题——我不知道我是否遗漏了一些非常明显的东西，或者这是否需要更复杂的脚本来实现。我已经搜索了好几天，似乎找不到一个足够接近我可以调整和调整的 Jquery 和 CSS 示例。很容易找到单个滑动面板演示，但没有任何东西可以容纳两个或三个重叠面板，并且还允许显示如何将主要内容定位在移动面板旁边。
我试图让三个面板从窗口左侧滑入/滑出，使用面板本身的手柄（就像我用来发布的文本字段底部的手柄的垂直版本这个问题）。面板还需要足够智能，以允许同时打开任何/所有面板（并且仍然在每个面板的右边缘留下 15px 的部分，以便用户始终可以单击任何面板的任何手柄）。最后，当任何/所有面板移入或移出时，主要内容块需要自动调整其宽度。如果我刷新浏览器窗口，如果面板可以设置一个 cookie 来记住它们的最后位置，那么会有额外的好处。
JQuery 需要知道每个面板的打开/关闭状态，以及每个面板的位置——这可能会有所不同，具体取决于在当前选定面板之前和之后是否有任何其他面板是打开或关闭的。例如，可以想象第三个面板可以位于四个不同位置中的一个，这取决于第一和第二个面板是伸出还是缩回。
细节：
(A.) 主窗口包含所有内容并隐藏所有溢出，高度和宽度为 100% / 流体。(B.) 窗口有一个标题栏，其中包含一些内容和控件。假设高度为 50 像素，宽度为 100%。(C.) 右下方的主要内容区域包含将根据需要（垂直）滚动的内容。(D.) 在左侧，我需要能够独立地滑入三个面板，以便用户一次看到任何/所有面板，或者在不需要时收回它们。面板的宽度为 200 像素，垂直度为 100%，在标题栏和窗口底部之间，当面板缩回时，其右侧仍显示约 15 像素，其中包含一个垂直对齐的手柄（图像），用户可以单击以制作每个面板面板移入或移出（取决于当前状态）。(E.) 当每个面板打开或关闭时，
我已经链接到下面的三个参考屏幕截图，这可能会更好地解释这一点。任何帮助将不胜感激 - 并提前感谢您。
