I'm in need of some assistance with CSS coding. I am currently working on creating a sidebar that slides in, similar to mobile pages, but instead of using absolute positioning, I have opted to float two divs inside a wrapper.
My ability to explain things is not the best, so I'll provide a simple example to illustrate my issue.
The HTML:
<!-- Used for toggling the sidebar -->
<input type="checkbox" id="toggle" hidden="hidden">
<!-- The wrapper -->
<div class="wrapper">
<!-- The content -->
<div class="content">
<label for="toggle">Show</label>
<!-- Content goes here -->
</div>
<!-- The sidebar -->
<aside class="sidebar">
<label for="toggle">Hide</label>
<!-- Sidebar content goes here -->
</aside>
</div>
The CSS:
/* General settings */
* { margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
}
/* Toggle effect */
#toggle:checked + .wrapper > .content {
margin-left: -25%;
transition: all ease 1s;
}
/* Wrapper styling */
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
transition: all ease 1s;
}
/* Content styling */
.wrapper > .content {
width: 100%;
height: 100%;
overflow: auto;
float: left;
background-color: #2ecc71;
transition: all ease 1s;
}
/* Sidebar styling */
.wrapper > .sidebar {
width: 25%;
height: 100%;
overflow: auto;
float: left;
background-color: #27ae60;
transition: all ease 1s;
}
When you click "Show" or "Hide," you'll notice that the sidebar does not slide in or out smoothly. Is there a way to achieve a smoother transition?