Horizontal animated slide-in menu from the right side [Archive]

dangkhoa

09-27-2017, 05:54 PM

I am looking for a script that does the following:

I've got a vertical button on the top right side of the window.
When you click on this button, a div(with some text, images and a few links) slides out pushing the button with it to the left.

When you click on the button again it should slide back in.

A the moment I just got it to appear and dissappear when you click on the button, but I really need it to slide.

Can anybody help me?

Thanks.

molendijk

09-30-2017, 06:06 PM

Something like this:
<!doctype html>
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Slide div to the left</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function()
{
$('#leftSlider-button').click(function() {
if($(this).css("margin-right") == "200px")
{
$('.leftSlider').animate({"margin-right": '-=200'});
$('#leftSlider-button').animate({"margin-right": '-=200'});
}
else
{
$('.leftSlider').animate({"margin-right": '+=200'});
$('#leftSlider-button').animate({"margin-right": '+=200'});
}

});
});
</script>

<style>
.leftSlider {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: auto;
color: white;
background: red;
margin-right: -200px;
}
#leftSlider-button {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 30px;
color: white;
background: green;
cursor: pointer
}
</style>

</head>
<body>

<div class="leftSlider">
<div style="padding: 20px">
Put your images, links etc. here<br>Put your images, links etc. here
</div>
</div>

<div id="leftSlider-button">Button</div>

</body>
</html>