After trying to implement the translate3d(150px,0px,0px); on my "content" div, I encountered an issue where an empty block appears at the top of the page. Unfortunately, I am unsure about how to resolve this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
html, body {
margin: 0;
height: 100%;
}
#side-panel {
color: white;
width: 150px;
height: 100%;
background: #1BA39C;
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-out;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0px;
padding: 10px;
}
li:hover {
background-color: red;
}
#nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: black;
}
.hide {
transform: translate3d(-150px,0,0);
}
.bodyhide {
transform: translate3d(0,0,0);
}
.show {
transform: translate3d(0,0,0);
}
.bodyshow {
transform: translate3d(150px,0px,0px);
}
#content {
transition: all .2s ease-out;
}
#subcontent {
position: relative;
top: 50px;
}
</style>
<div id="side-panel" class="hide">
<ul>
<li>
<a href='#'>Uno</a>
</li>
<li>
<a href='#'>Dos</a>
</li>
<li>
<a href='#'>Three</a>
</li>
<li>
<a href='#'>Cuatro</a>
</li>
<li>
<a href='#'>Cinco</a>
</li>
</ul>
</div>
<div id='content'>
<div id='nav-bar'>
<button id="panel-button">Panel</button>
</div>
<div id='subcontent'>
<p>Content</p>
</div>
</div>
<script type='text/javascript'>
var panel = document.getElementById("side-panel");
var button = document.getElementById("panel-button");
var myContent = document.getElementById("content");
panel.onclick = function () {
panel.className = "hide";
myContent.className = "bodyhide";
};
button.onclick = function () {
panel.className = "show";
myContent.className = "bodyshow";
};
</script>
</body>
If you want to see a live version of this code, visit this link: http://codepen.io/sbaglieri/pen/LERQXy