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>
New Comer (less than 5 posts)
Horizontal animated slide-in menu from the right side
Posting Permissions
Reply With Quote
Bookmarks