Flexbox sidemenu - html

Question

The following implementation i came up with for a sidemenu works fine
https://jsbin.com/getotijela/edit?html,css,output
HTML:
<link rel="stylesheet" type="text/css" href="main.css">
<div class="container">
<div class="menu">
a
</div>
<div class="content">
<span id="clickable">
basdasdasdasdas
</span>
</div>
<div>
<script>
document.getElementById("clickable").addEventListener('click',function(){
var el = document.getElementsByClassName("menu")[0]
el.className = "menuClosed"
})
</script>
CSS:
.test{
background-color:red;
}
.container{
display:flex;
flex-direction: row;
position:relative;
height:100%;
}
.menu{
width:200px;
/* left:20px; */
background-color:red;
}
.menuClosed{
width:0px;
background-color:red;
transition: 0.3s all;
}
.content{
background-color:yellow;
flex:1;
}
but what it does is collapse the sidemenu to a width of 0 ( as i've instructed it to). What i was aiming for was: having the sidemenu move to the left as many units as it's width, something that in the past i would achieve by modifying the leftcss property.
In other words, i dont want the menu to collapse to a width of 0, just have it move out of sight
How could i achieve something similar to that in flexbox if at all?

Answer 1

#PossessWithin Why would you use a translateX for that ?
You should use the flexbox-shrink and flexbox-basis property's they are made especially for these cases.
I made a fiddle check it out here JSFiddle
<aside class="sidebar is-visible">
<p class="sidebar-content">
Put all your content inside of here since this keeps the width of your sidebar <br>(so a div with the width you want the sidebar to be).
</p>
</aside>
<main class="content">
<button class="toggle-sidebar">Toggle sidebar</button>
<p>
scale this content
</p>
</main>
CSS
*{
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: flex-end;
}
.content {
display: flex;
min-height: 0;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
}
.sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
height: 100%;
}
.sidebar.is-visible ~ .content {
flex-basis: 0;
}
/* Animation */
.content {
transition: flex-basis .1s cubic-bezier(.465, .183, .153, .946);
will-change: flex-basis;
}
.sidebar.is-visible ~ .content {
transition: flex-basis .3s cubic-bezier(.465, .183, .153, .946);
}
.sidebar-content {
display: block;
width: 300px;
background-color: #eee;
height: 100%;
margin: 0;
padding: 20px;
border-right: 1px solid #ccc;
}
.content {
padding: 20px;
}
Please vote this up since it's the way it's supposed to be done.

Answer 2

Please try this:
HTML:
<link rel="stylesheet" type="text/css" href="main.css">
<div class="container">
<div class="menu">
a
</div>
<div class="content">
<span id="clickable">
basdasdasdasdas
</span>
</div>
<div>
CSS
.test{
background-color:red;
}
.container{
display:flex;
flex-direction: row;
position:relative;
height:100%;
}
.menu{
width:200px;
transition: 0.3s all ease-in-out;
background-color:red;
}
.menuClosed{
background-color:red;
transition: 0.3s all ease-in-out;
transform: translateX(-200px);
margin-right: -200px;
}
.content{
background-color:yellow;
flex:1;
}
I have changed the "menuClosed" class by moving it to the left with a transform: translateX(-200px). To make the screen move back to the right, I have added a negative margin right of the same size.
This may not be the best practice - I'm open minded to hear other solutions!
Also, as a plus, I have changed your Javascript code to toggle the class, making it work to open and close on click, instead of opening only.
You can see the new code here, on Codepen. I hope it helps you!