Question

我正在尝试创建一个带有滑动项目的菜单，当菜单滑出时它应该显示它的内容，但这样做是一个巨大的痛苦。以下是我到目前为止所说的内容：

我只希望内容显示菜单与其重叠的位置。我尝试将内容作为菜单的子项，但随后相对于菜单设置了定位。然后我尝试将内容绝对相对于包装器进行定位，但这意味着我无法浮动任何东西，溢出也不会那样。

如果应用overflow：隐藏到兄弟元素是不可能的，但你知道实现我的目标的另一种方式，就像真棒一样。

HTML：

<div class="slidingbar-wrapper">
    <h1 class="slidingbar-contentleft" id="title">Awesome App</h1>
    <h2 class="slidingbar-contentright" id="author">by Ashton War</h1>
    <div class="slidingbar" id="slidingbar1"></div>
</div>

CSS：

.slidingbar-wrapper{
    width: 100%;
    line-height: 50px;
}

.slidingbar{
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    transition: width 2s;
    -webkit-transition: width 2s;
}

.slidingbar-contentleft{
    margin: 0px;
    white-space: nowrap;
    float:left;
}

.slidingbar-contentright{
    margin: 0px;
    white-space: nowrap;
    float: right;
}

.slidingbar:hover{
    width: 100%;
}

Answer 1

这是我的想法

.slidingbar-wrapper{
    width: 100%;
    line-height: 50px;
    overflow: hidden;
}

.slidingbar{
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    transition: width 2s;
    -webkit-transition: width 2s;
    background-color: aquamarine;
    z-index: auto;
    position: relative;
}

.slidingbar:before, .slidingbar:after {
    content: "";
    background-color: white;
    top: 0px;
    width: 1000px;
    bottom: 0px;
    position: absolute;
    z-index: 9;
}
.slidingbar:before {
    right: 100%;

}
.slidingbar:after {
    left: 100%;
}
.slidingbar-contentleft{
    margin: 0px;
    white-space: nowrap;
    float:left;
    z-index: 1;
    position: relative;
}

.slidingbar-contentright{
    margin: 0px;
    white-space: nowrap;
    float: right;
    z-index: 1;
    position: relative;
}

.slidingbar:hover{
    width: 100%;
}

我在滑动条的两侧设置了两个伪元素。并将它们设置为比左右内容更高的z-index。

当滑杆变宽时，推动这些元素。它的z-index较低，因此它会“低于”它们，使它们可见。

fiddle

Answer 2

这是一个部分解决方案，但有一些限制，但它可能会激发一些新想法。

我会尝试以下HTML：

<div class="slidingbar-wrapper">
    <div class="slidingbar" id="slidingbar1">
       <h1 class="slidingbar-contentleft" id="title">Awesome App</h1>
       <h2 class="slidingbar-contentright" id="author">by Ashton War</h1>
    </div>
</div>

并尝试使用CSS transition属性，如下所示：

.slidingbar {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    transition: width 2s;
    position: relative;
    overflow: hidden;
}
.slidingbar * {
    visibility: hidden;
    transition: visibility 0s 0s;
}
.slidingbar-contentleft {
    margin: 0px;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
}
.slidingbar-contentright {
    margin: 0px;
    white-space: nowrap;
    position: absolute;
    right: 0;
    top: 0;
}
.slidingbar:hover {
    width: 100%;
}
.slidingbar:hover * {
    visibility: visible;
    transition-delay: 2s; /* delay visible till div fully expanded */
}

在.sliginbar div中，将子元素的visibility属性设置为hidden，然后使用延迟转换将visibility转换为visible滑动发生了。

我使用绝对定位将元素保留在一行上（尽管表格单元也可以工作）。

主要缺陷是鼠标悬停时，文本块突然消失，但你明白了。

如果你想要鼠标悬停鼠标控制级别，你将需要一个jQuery / JavaScript辅助解决方案。

请参阅演示：http://jsfiddle.net/audetwebdesign/KJTL6/

CSS：应用溢出：隐藏到兄弟

2 个答案:

fiddle