Basic responsive sidebar designs are not difficult, they just require some CSS flex magic.
(1) COLLAPSING SIDEBAR
(1A) THE HTML
CODE
<div id="main">MAIN</div>
<div id="side">SIDE</div>
- Sidebar on the left, main content to the right.
- Take note, there are menu items in the sidebar this time.
- Each menu item consists of an icon
<i class="ico">and text<i class="txt">.
(2B) THE CSS
CODE
/* (A) BIG SCREEN */
/* (A1) 2 COLUMNS LAYOUT */
body {
display: flex;
padding: 0; margin: 0;
min-height: 100vh;
}
#side { flex-shrink: 0; width: 200px; }
#main { flex-grow: 1; }
/* (A2) MENU ITEMS */
#side a { display: block; width: 100%; }
It's the same flex layout.
CODE
/* (B) SMALL SCREEN - COMPACT */
@media screen AND (max-width:768px) {
#side { width: 50px; }
#side .txt { display: none; }
}
But on small screens, we compact the sidebar by setting a smaller width and hiding the menu item text.
(3) DRAWER SIDEBAR
(3A) THE HTML
CODE
<!-- (A) SIDEBAR -->
<div id="side">
<a href="#">Section A</a>
<a href="#">Section B</a>
<a href="#">Section C</a>
</div>
<!-- (B) MAIN CONTENT -->
<div id="main">
<!-- (B1) SIDEBAR TOGGLE -->
<button id="maintog" onclick="document.getElementById('side').classList.toggle('show')">
☰
</button>
<!-- (B2) CONTENTS -->
<div id="maincon">MAIN</div>
</div>
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR