rusbear28 rusbear28 - 2 months ago 5
HTML Question

How to move the first html element if the second html element is over it

Sorry for my bad english :)

1) Sidebar moves to the right (Start Left position = -270, End position = 0);

2) Header contains logo with position:absolute

How to move the logo div to the right if the sidebar is above the logo?

<div class="logo">
<img src="http://placehold.it/70x70">
</div>

<div class="sidebar">
Menu item 1<br/>
Menu item 2<br/>
Menu item 3<br/>
Menu item 4<br/>
Menu item N<br/>
</div>


.logo {
position:absolute;
left:220px;
z-index:2;
}

.sidebar {
background-color:blue;
height:350px;
width:270px;
position:absolute;
left:-260px;
}


$( document ).ready(function() {
$(".sidebar").click(function() {
$(".sidebar").animate({left: "0px"}, 500);
});

});


https://jsfiddle.net/6ybj4dzn/

Answer

Have a look at this simple example I set up: https://jsfiddle.net/0oon722z/

Only added the following line:

  $(".logo").animate({left: $(".sidebar").width()}, 500);