javascript - 页面向右滑动

Question

好的，所以我正在尝试构建具有两种状态的右侧页面滑动效果，在滑动面板的初始打开时我想显示菜单，在选择菜单项时我想将框扩展到打开更大并显示该信息。

发现很难准确描述我想做的事情，因为我以前从未见过它，但是当选择一个该容器内的链接我希望它展开另一个 div 以 float 到它的左侧并进一步展开框。这有意义吗？任何关于其他地方的链接或一些 javascript 让它工作将不胜感激......这是我到目前为止的编码:

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>

CSS:

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;
}

这是 jsfiddle

Answer 1

在#enquirypost 之外添加#Extra。

http://jsfiddle.net/davidja/wFutQ/15/

    <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>