Menu duo séparation chose

dabblet.css

/**
 * Menu duo séparation chose
 */

body {
	background: white;
	padding: 0;
	margin: 0;
}

.sep {
	z-index: -1;
	background: black;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	left: 50%;
	-webkit-transition: all .5s ease-in-out;
}

.parent {
	width: 100px;
	height: 200px;
	position: absolute;
	top: 50px;
	background: red;
	cursor: pointer;
}

.maman {
	left: 100px;
}
.papa {
	right: 100px;
}
.maman:hover ~ .sep {
	left: 95%;
}
.papa:hover ~ .sep {
	left: 5%;
}

dabblet.html

<div class="parent maman"></div>
<div class="parent papa"></div>
<div class="sep"></div>

dabblet.js

// alert('Hello world!');

settings.json

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