Below is the HTML structure that I am working with:
<div class="container">
<div class="menu"></div>
</div>
Accompanied by jQuery:
$(document).ready(function() {
$(".container").click(function() {
$(".menu").css("left", "+=50px");
});
});
And here is the CSS styling:
.container{
position:relative;
height:50px;
width:auto;
background:lightgray;
}
.menu{
position:absolute;
width:50px;
height:35px;
background-color:green;
bottom:0px;
left:0px;
transition: left 1s;
}
You can view a demonstration of this code in action on JSFiddle.
The objective here is to move the .menu div to the left, as if being pulled by gravity. However, when clicked, it should move to the right. The desired effect is similar to the movement in the game Flappy Bird, but horizontal instead of vertical.