Мне просто нужна статическая кнопка/изображение/div на странице, которая при нажатии активирует отдельный div для скольжения с правой стороны экрана. Эта ссылка практически то, что я хочу:
http://jsfiddle.net/yHPTv/876/
Проблема в том, что я не хочу, чтобы кнопка скользила вместе с ней, она должна оставаться в статическом положении на странице. Затем мне нужна кнопка «закрыть» в новом видимом div.
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
});
});
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
right:-280px;
padding-left: 20px
}
#clickme {
position: absolute;
top: 0; left: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>