ラジオ ボタンを使用して、ページの左側に複数のボタンを作成し、右側のウィンドウ/ウィンドウをスライドさせようとしています。
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 ベースであれば、他のソリューションも歓迎します。
ありがとう