Javascript 从右开始的页面幻灯片

好的，我正在尝试建立一个有两种状态的右侧页面幻灯片效果，在滑动面板的初始打开时，我想显示菜单，在选择菜单项时，我想扩展框以打开得更大并显示信息

我发现很难准确地描述我试图做什么，因为我以前没有见过它，但在打开第一个div时，它将100%高200px宽，从右侧动画显示，当选择容器中的链接时，我希望它扩展另一个div，使其浮动到左侧，并将框扩展得更多。这有意义吗？任何关于其他地方做这件事的链接，或者一些javascript让这件事生效，都将不胜感激。。。以下是我目前的编码：

HTML:

---

这里是

看看当你把#额外的div放在#问询post div之外时会发生什么。我不确定这是否是你想要的，但当我在你的jsFiddle中尝试这个时，它肯定看起来更好

另外：当您使用position:absolute时，float属性是无用的，我会删除它来清理代码。您可能希望包括“-o-transition”和“transition”，以确保您的页面在每个浏览器上都能正确显示。

查询帖子之外的额外内容越多

菜单

测试

我想我有您想要的解决方案：

棘手的部分是，你们把div（子菜单）放在div（菜单）之前。然后您可以使用css选择器

。子菜单：target+。菜单{

，它可以在子菜单指向目标时保持菜单打开

您还可以使用

保持子菜单和菜单打开的同时执行更深入的子菜单。子菜单：target+。子菜单

和

。子菜单：target+。子菜单+。菜单

选择器

我的html代码（很抱歉，我添加了几个类，其中一些现在没有使用）：

<div id="enquirypost">

<div style="width:200px;">
<a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
<br />
<br />
Menu<br />
<a href="#" style="color:#fff; text-decoration:none;">Close</a>
</div>

<div id="extra">test</div>


</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

body{margin:0;}
#enquirypost {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#ccc;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#enquirypost:target 
{
    bottom:0px;
    overflow:auto;
    min-width:200px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

#extra {
        height:100%;
        overflow:hidden;
        z-index:1000;
        width:0px;
        float:right;
        background:#000;
        font-size:20px;
        line-height:65px;
        position:absolute;
        top:0px;
        right:0px;
        color:#FFF;
        text-align:center;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;}
#extra:target 
{
    bottom:0px;
    overflow:auto;
    min-width:400px; 
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

    <div id="enquirypost">

    <div style="width:200px;">
    <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
    <br />
    <br />
    Menu<br />
    <a href="#" style="color:#fff; text-decoration:none;">Close</a>
    </div>




    </div>

    <a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

    <div id="extra">test</div>

<div>

    <div id="extra" class="menuPart submenu">
            <div class="content">test</div>
    </div>

    <div id="enquirypost" class="menuPart menu">
        <div class="content">
            <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a>
            <br />
            <br />
            Menu<br />
            <a href="#" style="color:#fff; text-decoration:none;">Close</a>
        </div>
    </div>

</div>

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a>

body {
    margin:0;
}

.menuPart {
    height: 100%;
    width: 0px;
    font-size:20px;
    line-height:65px;
    position:absolute;
    color: #FFF;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.menu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.submenu:target + .menu {
    overflow: auto;
    min-width: 200px;
}

.submenu:target {
    overflow: auto;
    min-width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    padding-right: 200px;
}

#enquirypost {
    background: #CCC;
    right: 0px;
}

#extra {
    background: #000;
    right: 0px;
}