0

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

Finding it hard to describe exactly what I'm trying to do as i havent seen it before, but pretty much on opening the first div that will be 100% in height 200px in width animated in from the right, when selecting a link within that容器我希望它扩展另一个 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

4

3 回答 3

1

More the #Extra outside the #enquirypost.

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>
于 2013-07-01T14:10:16.650 回答
1

看看将#extra div 放在#enquirypost div 之外会发生什么。我不确定这是否是您正在寻找的，但是当我在您的 jsFiddle 中尝试此操作时，它确实看起来更好。

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

于 2013-07-01T14:05:39.330 回答
0

我认为我有您正在寻找的解决方案：

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;
}
于 2013-07-01T14:27:18.120 回答