Zusammenklappbarer flexibler Breite Seitenleiste mit nur CSS

Nehmen wir an ich habe eine zusammenklappbare Feste Breite sidebar, die wie folgt definiert:

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 hier: http://codepen.io/anon/pen/pJRYJb

Also hier die Frage:

Wie kann ich von dort aus eine mit flexibler Breite sidebar?

Hier sind die Einschränkungen:

kein javascript (ich will den browser auf den Umgang mit den layouting – nicht von mir)
die sidebar darf keine überschneidungen der Inhalte
wenn zusammengebrochen, die sidebar ist nach rechts an den Rand ausgerichtet werden muss, mit dem Fenster Links der Grenze (in der Lage sein zu befestigen absolut positioniert-Registerkarte auf der rechten Seite, immer sichtbar)
die Breite der sidebar sollten nicht ändern, wenn zugeklappt, um zu vermeiden, fließt während des übergangs
reibungslosen übergang ohne plötzliche Sprünge
moderne CSS (flexboxes, calc) ist in Ordnung,

Das Hauptproblem hier ist, dass ich kann nicht einen Weg finden, zu sagen margin-right: -100% wo 100% bezieht sich auf die Breite der sidebar

Jede Hilfe wird sehr geschätzt!

javascript ist gut geeignet für die Auslösung der Zusammenbruch der Logik. Aber ich will nicht, um die Verwendung von javascript für das Layout.
Wie wäre width: auto; display: flex; für .sidebar
und was mache ich in .sidebar.collapsed?
Was bedeutet flexible-Breite bedeuten? Wie flex: 1?
es bedeutet: sollten die nehmen so viel Breite, wie es die Kinder – als ob es display: inline-block

InformationsquelleAutor Daniel | 2015-06-01

3

Wie etwa die änderung der width statt position auf klicken Sie auf? Ich benutze max-width in diesem Fall, es funktioniert fast das gleiche wie unbekannte Breite. Dies wird wahrscheinlich dazu führen, dass die Inhalte reflow auf der Seitenleiste zu verwenden, so white-space:nowrap wenn es akzeptabel ist.

http://jsfiddle.net/dn4ge901/

CSS:
```
body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
    max-width: 1000px;
}
.sidebar.collapsed {
    max-width: 0;
    overflow: hidden;
}
```
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>
```
Andere Problemumgehung ist die Verwendung transform Breite position zusammen, aber der Effekt der animation etwas anders sein wird.

http://jsfiddle.net/vkhyp960/

CSS:
```
body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
}
.sidebar.collapsed {
    transform: translateX(-100%);
    position: absolute;
}
```
HTML:
```
<div class="container">
    <div class="sidebar" id="sidebar">
        <div>SIDEBAR</div>
    </div>
    <div class="content">lorem bla bla
        <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">toggle Sidebar</button>
    </div>
</div>
```
- Die Frage sagt "die Breite der sidebar sollte nicht ändern"
- ja, es ist immer in der Nähe! Jedoch, diese Lösung bewirkt, dass der Inhalt der sidebar nach reflow, da die Breite ändert sich während des übergangs. Das ist etwas, was ich lieber vermeiden.
- können Sie sidebar {white-space: nowrap;} - jsfiddle.net/dn4ge901/1
- die Inhalte der sidebar sind wirklich Komplex-Komponenten. So ist dies wahrscheinlich nicht funktioniert 🙁
- es ist ein weiterer Weg, mit transform, aber die animation ist anders - jsfiddle.net/dn4ge901/2
- ja, ich habe gespielt, um mit transform: translateX(-100%); schon. Dies jedoch nicht dazu führen, dass die .content Bereich anzupassen. (Ich muss noch festgelegt margin-right auf einen negativen Wert)
- überprüfen Sie, dass die demo, die ich auch einstellen, dass es absolute position, so dass keine Notwendigkeit, negative Marge festgelegt werden.
- schön! Natürlich ist der übergang nicht sehr glatt, aber dennoch, aber es ist definitiv besser als alles, was ich kommen mit so weit. Wenn Sie aktualisieren Sie Ihre Antwort erhalten Sie einen +1 von mir 🙂
- sicher, dass es aktualisiert. Ich bin bereit zu sehen, ob es eine perfekte Lösung zu.
InformationsquelleAutor Stickers

Piggy-backing aus Pangloss' Vorschlag re: die Transformation... Sie können nur eine negative Marge auf den Inhalt, wenn Sie wissen, die Breite der sidebar. Keine Notwendigkeit, um die Seitenleiste wechseln Sie zur absoluten Positionierung.

@mixin transitionAll() {
  transition: all .3s ease-out;
}
html, body {
  height: 100%;
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
}
.sidebar {
  flex: 1 0 300px;
  background: #333;
  height: 100%;
  @include transitionAll();
  &.is-collapsed {
    transform: translateX(-100%);
  }
}
.content {
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: #999;
  @include transitionAll();
  &.is-full-width {
    margin-left: -300px;
  }
}

<div class="container">
  <aside class="sidebar">
  </aside>
  <section class="content">
    <button class="btn btn-primary">Toggle</button>
  </section>
</div>

$(function() {
  $('.btn').on('click', function() {
    $('.sidebar').toggleClass('is-collapsed');
    $('.content').toggleClass('is-full-width');
  });
});

Finden Sie den Stift LxRYQB von Jason Florenz (@JFlo) auf CodePen.

Vielen Dank für deinen input! Leider ist dies nicht ganz das, was ich suchte, da ich eine Lösung für ein mit flexibler Breite sidebar, also der Seitenleiste Breite passt es die Kinder. (z.B. weil es display: inline-block)

InformationsquelleAutor JFlo

0

Für was es Wert ist, ich tun haben eine teilweise js-Lösung. Die animation selbst ist vollständig mit CSS, es behebt nur die width:auto problem. Man muss nur die Breite der sidebar domElement mit js, wenn das element geladen wird:

domElement.style.width = `${parseInt(domElement.offsetWidth)}px`;

Dies löst den 'unbekannten' width problem. Und Sie können Ihre .collapsed Ansatz, gerade wie Sie mögen zu tun. Die einzige Anpassung ist, dass Sie brauchen, um hinzuzufügen !important zu den .collapsed {width: 300px !important;} Breite Wert.

InformationsquelleAutor user007

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.