Da Sie es mit Bootstrap machen wollen, können Sie es mit Bootstrap-Kollaps machen.
Die Idee hinter dieser Lösung ist die folgende:
Haben Sie Ihren reduzierbaren Inhalt in einer bestimmten Klasse, nennen wir ihn collapseMenu . Wir brauchen auch eine Klasse, die anzeigt, ob sie versteckt ist oder nicht. Bootstrap liefert es bereits für uns collapse .
Als nächstes brauchen wir den toggler , das Hamburger-Icon. Es erfordert ein data-toggle , um die Klasse anzugeben, die es bei jedem Klick umschalten muss, und ein data-target , um das / die Element (e) zu kennen, die das Ziel haben soll, collapseMenu .
Der CSS -Teil ist keine große Sache, und Sie können es auf verschiedene Arten tun. Ich mag den CSS3 flexbox -Ansatz.
Unsere Seite (speziell .container ) wird eine Flex-Richtung-Zeile sein.
Dann werden wir das rechte Panel so einstellen, dass es so viel Platz wie möglich einnimmt. Wenn der Inhalt umgeschaltet wird, schrumpft es:
%Vor%Komplette Arbeitsversion:
HTML
%Vor%CSS
%Vor%Tags und Links angular twitter-bootstrap-3 toggle