basic, page a onglet en bas

dabblet.css

/* basic, page a onglet en bas */
*{
	margin:0;
	padding:0;
}
li li {border:solid 10px;vertical-align:top;}
#page1{
	display:inline-block;
		width:630px;
		height:120px;
		background:green;
}
#page2{
	display:inline-block;
		width:630px;
		height:120px;
		background:yellow;
}
#page3{
	display:inline-block;
		width:630px;
		height:120px;
		background:orange;
}
#page4{
	display:inline-block;
		width:630px;
		height:120px;
		background:white;
}
#page5{
	display:inline-block;
		width:630px;
		height:120px;
		background:brown;
}
	
	#truc{
		background:Red;
		width:650px;
		height:400px;
		padding:10px;
		overflow:hidden;white-space:nowrap;
	}
	#slide{
		width:630px;
		height:360px;
		padding:10px;
		sizing-box:border-box;
		 		background:black;
		 		overflow:hidden;;
	}
	#G:active ~ #truc #slide{
		background:green;
		margin-left:-400px;
	}
	
	#b1, #b2, #b3, #b4, #b5{
		display:inline-block;
		width:50px;
		height:50px;
		background:blue;
		
	}
	a{
		color:white;
	}
		:target ~ li {width:0!important;overflow:hidden;border:0;}

dabblet.html

<ul>
 	
    <li id="truc"><ul id="slide"><li id="page1">1</li><li id="page2">2</li><li id="page3">3</li><li id="page4">4</li><li id="page5">5</li></ul>

    </li><!--fin truc-->
    <li id="b1"><a href="#page1">page 1</a></li>
 	<li id="b2"><a href="#page2">page 2</a></li>
    <li id="b3"><a href="#page3">page 3</a></li>
    <li id="b4"><a href="#page4">page 4</a></li>
    <li id="b5"><a href="#page5">page 5</a></li>
 </ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}