Как сделать шторку, как в мобильной версии вк. Если провести слева направо, то она выползает, в противоположную сторону закрывается. Подскажите, как реализовать?
-
Можно использовать библиотеку slideout – Ihor Tkachuk 27 мар '16 в 10:27
1 ответ
var slide = document.getElementById('slide');
slide.onmousedown = function(e) {
slide.style.transition = '0s';
var curX = e.clientX;
var left = slide.offsetLeft;
var oldCurX = 10;
slide.onmousemove = function(e) {
if (slide.offsetLeft < 1 || e.clientX < oldCurX) {
oldCurX = e.clientX;
slide.style.left = left - (curX - e.clientX) + 'px';
}
}
slide.onmouseup = function(e) {
slide.style.transition = '0.2s';
slide.style.left = (oldCurX < curX) ? -slide.offsetWidth + 50 + 'px' : '0px';
slide.onmousemove = null;
}
}
#slide {
position: absolute;
left: 0;
top: 0;
background-color: #00afff;
width: 20%;
height: 100%;
}
<html>
<body>
<div id='slide'></div>
</body>
</html>