Question

好吧所以我正在尝试用两种状态构建一个右侧页面幻灯片效果，在滑动面板的初始打开时我想显示菜单并选择我要扩展的菜单项到打开甚至更大，并显示该信息。

发现很难准确描述我正在尝试做的事情，因为我之前没有看到它，但几乎是在打开第一个div，它将是100％高度200px的宽度，从右边开始动画，当选择一个在该容器内的链接，我希望它扩展另一个div浮动到它的左边，并进一步扩展框。这有意义吗？任何其他链接在哪里或这个或一些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

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

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

Answer 2

更多#equirypost之外的#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>

Answer 3

我认为我有你想要的解决方案：

http://jsfiddle.net/wFutQ/17/

棘手的部分是在“菜单”的div之前放置作为“子菜单”的div。然后你可以使用css选择器.submenu:target + .menu {，它可以在子菜单被定位时保持菜单打开。

您还可以在使用.subsubmenu:target + .submenu和.subsubmenu:target + .submenu + .menu选择器保持子菜单和菜单打开的同时执行更深入的子菜单

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

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

我的css代码：

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

页面从右侧滑动

3 个答案: