Come posso far scomparire la barra laterale e rendere il contenuto ridimensionato in Flexbox per riempire il vuoto?

Question

Il layout del mio flexbox è basato su Philip Walton's Holy Grail Layout.

Sto tentando di creare una diapositiva in/scorrere fuori la barra laterale di navigazione molto simile a these ma utilizzando il layout di una casella flessibile, non div in posizione assoluta.

Ho visto molti menu scorrevoli Flexbox come questo Off Canvas Flexbox Menu, ma sembrano tutti far scorrere l'articolo sulla barra laterale. Voglio che la barra laterale spinga/tira l'articolo quando scivola dentro e fuori dalla vista.

Per raggiungere questo obiettivo, è stata attivata la proprietà di visualizzazione CSS tra display:block e display:none. Funziona perfettamente quando la barra laterale è nascosta e il contenuto viene ridimensionato automaticamente per riempire il nuovo spazio più grande. JSFiddle demonstrating display toggle.

Tuttavia, quando provo a utilizzare le proprietà di conversione come transform:translateX(-12em) per far scorrere la barra laterale, il contenuto rimane nello stesso posto e non viene ridimensionato. Questo lascia un buco dove può essere visto il contenitore genitore. JSFiddle demonstrating the sliding toggle.

Domanda: Come posso far scorrere il nav fuori dalla vista e rendere il ridimensionamento article per riempire il vuoto?

Nota: mi piacerebbe realizzare questo senza usare javascript.

Answer 1

Le trasformazioni sono puramente visive, in realtà non spostano l'elemento dalla posizione del layout.

Utilizzare invece margin-left.

JSfiddle Demo

html, 
 
body, 
 
main, 
 
article, 
 
nav, 
 
aside { 
 
    height: 97%; 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    background-color: #ccc; 
 
    margin: 1.5%; 
 
} 
 
main { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1; 
 
    overflow: hidden; 
 
} 
 
article { 
 
    flex: 1; 
 
} 
 
nav, 
 
aside { 
 
    /* 12em is the width of the sidebars */ 
 
    flex: 0 0 12em; 
 
    transition: margin 0.3s ease 
 
} 
 
/* Checkbox hack to toggle nav visibility */ 
 

 
input ~ nav { 
 
    margin-left: -12em; 
 
} 
 
input:checked ~ nav { 
 
    margin-left: 0; 
 
}

<header style="background-color: #a4c400;color:#fff;padding:0.25em"> 
 
    <label for="toggle">Click to Toggle Nav</label> 
 
</header> 
 
<main style="background-color: #ccc;"> 
 
    <input id="toggle" type="checkbox" checked style="display:none" /> 
 
    <nav style="background-color: #8dd0f2;">Nav</nav> 
 
    <article style="background-color:#fff">Article</article> 
 
    <aside style="background-color: #8dd0f2;">Aside</aside> 
 
</main>

Answer 2

Questo potrebbe essere un altro modo.

html, 
 
body, 
 
main, 
 
article, 
 
nav, 
 
aside { 
 
    height: 97%; 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    background-color: #ccc; 
 
    margin: 1.5%; 
 
} 
 
main { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex: 1; 
 
} 
 
nav, 
 
aside { 
 
    /* 12em is the width of the sidebars */ 
 
    flex: 0 0 12em; 
 
    transition: all 0.3s ease 
 
} 
 
/* Checkbox hack to toggle nav visibility */ 
 

 
input:checked ~ nav { 
 
    transform: translateX(0); 
 
    flex: 1; 
 
} 
 
input ~ nav { 
 
    transform: translateX(-12em); 
 
    flex: 0; 
 
    width: 0px; 
 
} 
 
input:checked ~ article { 
 
    flex: 2; 
 
} 
 
input ~ article { 
 
    flex: 3; 
 
}

<header style="background-color: #a4c400;color:#fff;padding:0.25em"> 
 
    <label for="toggle">Click to Toggle Nav</label> 
 
</header> 
 
<main style="background-color: #ccc;"> 
 
    <input id="toggle" type="checkbox" checked style="display:none" /> 
 
    <nav style="background-color: #8dd0f2;">Nav</nav> 
 
    <article style="background-color:#fff">Article</article> 
 
    <aside style="background-color: #8dd0f2;">Aside</aside> 
 
</main>