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 に transition-delay を設定することです。私のコードをコメントで説明します。

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 つの欠点があります。最初のトランジションにも 1 秒の遅延があるため、最初のアニメーションに遅延があるように見えます。

JSFIDDLE

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

これがあなたを助けることを願っています!

アップデート：

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

于 2013-08-13T08:34:00.043 に答える