3

尝试可能使用单选按钮在页面左侧创建多个按钮，以在右侧滑出窗口/窗口。

input[type=checkbox]
{
position: absolute;
top: -9999px;
left: -9999px;
}

label
{
background:red;
background-size:100%;
width:100px;
height:100px;
position:relative;
top:-50px;
left:10px;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}


div1
{
position:absolute;
top:0px;
left:100%;
background: white;
width: 35%;
height: 100%;
line-height: 20px;
text-align:left;
color: black;
margin:20px 20px 20px 20px:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Z-index:1;
overflow:scroll;
}


input[type=checkbox]:checked ~ div1 
{
background:grey;
position:absolute;
top:0px;
left:65%;
overflow:scroll;
}


label:hover
{
opacity:0.5;
}

效果我正在寻找红色块是按钮并且文本窗口滑入和滑出的地方

http://jsfiddle.net/bKaxg/215/

诀窍是我需要其他按钮才能在切换下一个窗口之前将最后一个滑出窗口返回屏幕。

与此类似，但不希望水平选项卡http://css-tricks.com/functional-css-tabs-revisited/或内容区域的有限位置。

只要它们是基于 CSS/HTML 的，其他解决方案也很受欢迎。

谢谢

4

1 回答 1

0

我希望我能正确理解你的问题。我用2个单选按钮做了一个例子。诀窍是为当前关闭的 div 设置一个转换延迟。我将用注释解释我的代码。

HTML

<input type="radio" name="slider" id="one">
<input type="radio" name="slider" id="two">

<label for="one">slider one</label>
<label for="two">slider two</label>

<div class="slider slider_one">one</div>
<div class="slider slider_two">two</div>

CSS

html,body {
    height:100%;
    width:100%;
    overflow:hidden; /* you can change this, just for the example */
}

input {
    position:absolute; /* move the checkbox from the field since we can't style them */
    left:-9999px;
    top:-9999px;
}

label {
    -webkit-appearance:none; /* use labels instead, linked to the checkboxes */
    -moz-appearance:none;
    appearance:none;
    width:50px;
    height:50px;
    background-color:#ccc;
}

.slider {
    position:absolute; /* we move the content sliders from the field */
    width:400px;
    height:100%;
    right:-400px;
    background-color:#ccc;
    -webkit-transition: all 1s; /* transition of 1 second */
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#one:not(:checked) ~ .slider_two, #two:not(:checked) ~ .slider_one  {
    -webkit-transition-delay:1s; /* this is where the magic happens, the currently closed div get's a 1 second delay, the same duration as the animation. This will make sure that the the div will close first and that the second div will open after that. */
    -moz-transition-delay:1s;
    transition-delay:1s;
}

#one:checked ~ .slider_one,
#two:checked ~ .slider_two {
    right:0; /* on click on a label, radio button get's checked and we move the slider out */
}

这个解决方案有一个缺陷！第一个过渡也会有 1 秒的延迟，因此看起来第一个动画有延迟。

JSFIDDLE

http://jsfiddle.net/kWQ3c/1/

希望这可以帮助你！

更新：

http://jsfiddle.net/kWQ3c/2/

于 2013-08-13T08:34:00.043 回答