Printable View
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.
Something like this:Code:<!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>