CSS: apply overflow:hidden to sibling

Question

I'm trying to create a menu with sliding items, when the menu slides out it should reveal it's contents but doing so has been a huge pain to make. Here's what I've got so far to illustrate:

http://jsfiddle.net/5KW8G/

I only want the content to display where the menu overlaps it. I tried making the content a child of the menu but then the positioning was set relative to the menu. I then tried positioning the contents absolutely relative to the wrapper but that meant I couldn't float anything and the overflow didn't work that way either.

If applying overflow:hidden to a sibling element is impossible but you know another way of achieving my goal that'd be just as awesome.

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

Here is my idea

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

I set two pseudo elements on the sides of slidingbar. and set those to a higher z-index than the left and right content.

when slidebar gets wider, pushes those elements. And it's z-index is lower, so it gets "under" them, making them visible.

fiddle

Answer 2

Here is a partial solution, with some limitations, but it might inspire some new ideas.

I would try the following 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>

and experiment with the CSS transition property as follows:

.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 */
}

In the .sliginbar div, set the visibility property of the child elements to hidden and then use a delayed transition to turn visibility to visible after the sliding has taken place.

I used absolute positioning to keep the elements on a single line (though table-cells would also work).

The major flaw is that on mouse out on the hover, the text blocks disappear abruptly, but you get the idea.

If you want to have the mouse-over mouse-out level of control, you will need a jQuery/JavaScript assisted solution.

See demo at: http://jsfiddle.net/audetwebdesign/KJTL6/