Pliable souple-largeur de la barre latérale en utilisant uniquement CSS
Supposons que j'ai un réductible fixe-largeur de la barre latérale définie comme ceci:
HTML
<div class="container">
<div class="sidebar" id="sidebar">
SIDEBAR
</div>
<div class="content">
lorem bla bla
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">
toggle Sidebar
</button>
</div>
</div>
CSS
body {
margin:0;
}
.container {
display: flex;
min-height:100px;
}
.sidebar {
position: relative;
left: 0;
width: 200px;
background-color: #ccc;
transition: all .25s;
}
.sidebar.collapsed {
left:-200px;
margin-right:-200px;
}
Codepen ici: http://codepen.io/anon/pen/pJRYJb
Alors, voici la question:
Comment puis-je aller à partir de là à une souple-largeur barre latérale?
Voici les contraintes:
- pas de javascript (je veux le navigateur de traiter avec le layouting – pas moi)
- la barre latérale ne doit pas chevaucher le contenu
- lorsque s'est effondré, la barre latérale de droite de la bordure doit être aligné avec la de gauche de la fenêtre de la frontière (pour être en mesure de fixer une position absolue de l'onglet sur le côté droit, ce qui est toujours visible)
- la largeur de la barre latérale ne faut pas changer de si s'est effondré pour éviter les remboursements pendant la période de transition
- transition en douceur, sans brusques sauts
- moderne CSS (flexboxes, calc) c'est bien
Le principal problème ici est que je ne peux pas trouver un moyen de dire margin-right: -100%
où 100%
se réfère à la largeur de la barre latérale
Toute aide sera grandement appréciée!
javascript est très bien pour le déclenchement de l'effondrement de la logique. Mais je ne veux pas utiliser le javascript pour le layouting.
Que diriez -
et que dois-je mettre dans
Ce n' flexible de la largeur signifie? Comme
cela signifie: faut-il prendre autant de largeur que ce sont les enfants – comme si c'était
Que diriez -
width: auto; display: flex;
pour .sidebar
et que dois-je mettre dans
.sidebar.collapsed
?Ce n' flexible de la largeur signifie? Comme
flex: 1
?cela signifie: faut-il prendre autant de largeur que ce sont les enfants – comme si c'était
display: inline-block
OriginalL'auteur Daniel | 2015-06-01
Vous devez vous connecter pour publier un commentaire.
Piggy-backing hors Pangloss " suggestion re: le transformer... vous pouvez simplement appliquer une marge négative pour le contenu si vous connaissez la largeur de la barre latérale. Pas besoin d'avoir la barre latérale interrupteur de positionnement absolu.
--
--
Voir le Pen LxRYQB par Jason Florence (@JFlo) sur CodePen.
display: inline-block
)OriginalL'auteur JFlo
Pour ce que ça vaut, je ne ont une partie js solution. L'animation elle-même est faite entièrement en CSS, c'est juste résout le
width:auto
problème. Vous venez de définir la largeur de la barre latérale domElement avec js, lorsque l'élément est chargé:domElement.style.width = `${parseInt(domElement.offsetWidth)}px`;
Cela résout l '"inconnu" problème de largeur. Et vous pouvez utiliser votre
.collapsed
approche juste comme vous aimez le faire. Le seul ajustement est que vous aurez besoin d'ajouter!important
à la.collapsed {width: 300px !important;}
valeur de la largeur.OriginalL'auteur user007