Fixed-Collapsible-Linke-Sidebar mit reaktionsfähigem Inhalt

Question

Mein Ziel ist es, zwei Sidebars auf der linken Seite zu haben, die fest und zusammenklappbar sind und den Hauptinhalt auf der rechten Seite haben, den Sidebars beim Kollabieren/Expandieren zu folgen.

Illustration der möglichen Positionen für Sidebars und Inhalt:

Aber lassen Sie uns Schritt für Schritt fort.

1. Ich möchte einen festen Seitenleiste auf der linken Seite, die zusammenklappbar ist, und der Inhalt (auf der rechten Seite der Seitenleiste) erweitert werden, wenn die Seitenleiste eingeklappt.

   Das Ding hier ist, dass die Seitenleiste eine feste Position hat, so dass der Inhalt auf der rechten Seite nach rechts geschoben werden muss (mit einem linken Rand), um Überlappungen zu vermeiden.

   weiß, dass ich die Breite der Seitenleiste, so dass es kein Problem ist mit CSS/JavaScript zu spielen, und ich habe ein funktionierendes Beispiel hier: https://jsfiddle.net/Pawamoy/yamm7eLh/2/

   Grundsätzlich, wenn Sie auf der Seitenleiste klicken (unterer Teil), active Klasse ist in der Seitenleiste umgeschaltet und expand Klasse ist für den Inhalt umgeschaltet. Diese Klassen ändern die Breite der Seitenleiste und den linken Rand des Inhalts.

   $(document).ready(function() { 
       $('#sidebar').on('click', function(e) { 
       if ($(e.target).is("#sidebar")) { 
        $('#sidebar').toggleClass('active'); 
        $('#content').toggleClass('expand'); 
       } 
       }); 
   }); 
   

2. Ich möchte eine zweite feste und zusammenklappbaren Seitenleiste hinzufügen, auf der rechten Seite des ersten.

   Aber das Spielen mit getoggten CSS-Klassen ist nicht genug, da ich berechnen muss, welche Sidebar aktiv ist oder nicht, um den linken Rand des Inhalts einstellen zu können. Der linke Rand wäre 160px, wenn beide Seitenleisten zusammengebrochen sind, 320px, wenn nur einer reduziert ist, und 500px, wenn keine Seitenleiste minimiert ist. Nicht nur das, sondern die zweite Seitenleiste selbst muss je nach Breite der ersten Seitenleiste auf der rechten Seite hin und her geschoben werden.

Lösung, wie ich es mir vorstelle: der Inhalt konnte nur „folgen“, um das Element auf seiner linken Seite (der zweite Kasten), ohne seinen linken Randwert zu ändern. Gibt es eine Möglichkeit, dies zu tun, da beide Seitenleisten fest sind (sie bleiben an der gleichen Position auf dem Bildschirm, wenn der Benutzer den Hauptinhalt scrollt)? Mit anderen Worten, wie kann ich die zweite Seitenleiste relativ zu der ersten und den Inhalt relativ zu der zweiten Seitenleiste positionieren und gleichzeitig beide Seitenleisten "fixiert" haben?

Answer 1

Ich löste dies durch Denken mit Boxen. Anstatt zu versuchen, eine komplexe Größenänderung zwischen drei Side-to-Side-Elementen zu erreichen, habe ich eine weitere Schicht div verwendet. Sehen Sie die Idee auf dem Bild unten: auf der linken Seite ist, was ich versucht habe zu tun. Auf der rechten Seite habe ich es gelöst. Ich habe sogar eine feste Navigationsleiste hinzugefügt. Ich nahm einfach das, was ich bereits hatte und benutzte es ein zweites Mal in einem Sub-Div.

Der Schlüssel hier ist zu NICHT geben Sie die left CSS Positionierung Wert für Ihre festen Elemente. Hier ist die aktualisierte Geige: https://jsfiddle.net/Pawamoy/yamm7eLh/3/