CSS for collapsible sidebar with dynamic width

Question

CSS for collapsible sidebar with dynamic width

Imagine having a collapsible fixed-width sidebar like this:

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

Now, the question arises:

How can we transform this into a flexible-width sidebar?

Here are the key requirements:

Avoid using JavaScript for layouting
Ensure that the sidebar does not overlap the content
When collapsed, align the sidebar's right border with the window's left border
Maintain constant sidebar width even when collapsed to prevent reflows during transitions
Create smooth transitions without abrupt movements
Utilize modern CSS features like flexbox and calc

The challenge lies in finding a way to set margin-right: -100%, where 100% represents the sidebar's width

Your assistance is highly appreciated!

html css transition flexbox

Answer 1

Answer №1

Have you thought about adjusting the width instead of changing the position when clicked? Using max-width in this scenario can yield similar results to an unknown width. Keep in mind that this change may cause content reflow on the sidebar, so consider using white-space:nowrap if it fits your needs.

Check out this example on jsFiddle

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
    max-width: 1000px;
}
.sidebar.collapsed {
    max-width: 0;
    overflow: hidden;
}

<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>

Another approach is combining transform with position for a different animation effect.

View this alternative solution on jsFiddle

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
}
.sidebar.collapsed {
    transform: translateX(-100%);
    position: absolute;
}

<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>

Answer 2

Have you thought about adjusting the width instead of changing the position when clicked? Using max-width in this scenario can yield similar results to an unknown width. Keep in mind that this change may cause content reflow on the sidebar, so consider using white-space:nowrap if it fits your needs.

Check out this example on jsFiddle

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
    max-width: 1000px;
}
.sidebar.collapsed {
    max-width: 0;
    overflow: hidden;
}

<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>

Another approach is combining transform with position for a different animation effect.

View this alternative solution on jsFiddle

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
}
.sidebar.collapsed {
    transform: translateX(-100%);
    position: absolute;
}

<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>

Answer 3

Answer №2

Expanding on Pangloss' idea regarding the transformation... you can easily adjust the content by applying a negative margin if you have knowledge of the sidebar's width. There is no necessity for the sidebar to switch to absolute positioning.

@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');
  });
});

Check out Jason Florence's Pen LxRYQB on CodePen.

Answer 4

Expanding on Pangloss' idea regarding the transformation... you can easily adjust the content by applying a negative margin if you have knowledge of the sidebar's width. There is no necessity for the sidebar to switch to absolute positioning.

@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');
  });
});

Check out Jason Florence's Pen LxRYQB on CodePen.

Answer 5

Answer №3

If it helps, I actually do have a solution using JavaScript. The animation itself is completed purely with CSS in order to address the issue with setting the width to 'auto'. By utilizing JavaScript, you can simply define the width of the sidebar domElement when the element loads:

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

This effectively solves the problem of the unknown width. You can still implement your '.collapsed' method as desired. The only modification required is adding '!important' to the width value in

.collapsed {width: 300px !important;}

.

Answer 6

If it helps, I actually do have a solution using JavaScript. The animation itself is completed purely with CSS in order to address the issue with setting the width to 'auto'. By utilizing JavaScript, you can simply define the width of the sidebar domElement when the element loads:

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

This effectively solves the problem of the unknown width. You can still implement your '.collapsed' method as desired. The only modification required is adding '!important' to the width value in

.collapsed {width: 300px !important;}

.

CSS for collapsible sidebar with dynamic width

Now, the question arises:

Answer №1

Answer №2

Answer №3

Similar questions

Sending a request to a PHP file using Ajax in order to display information fetched from

Adding an entry to a table with the events linked to a specific link

I am experiencing issues with my three.js script not functioning properly within the context of a

Placing MySQL information into a container

Attempting to evenly distribute items within a div container

Stuck on AMChart while trying to load data

What is the most efficient way to temporarily transform a button into a tab switcher?

The width of the Apex chart is either overflowing or not stretching properly

A single button that performs multiple actions with just one click

The AddThis counter is missing the right border when integrated with Twitter's Bootstrap 3

Dawn Break Alarm Timepiece - Online Platform

Give GetElementsByClassName a shot

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

Leverage the power of Bootstrap by showcasing several carousels in a sleek grid layout

missing method in HTML/JavaScript

Using jQuery and cheerio to iterate through a collection of items

Tips for transferring the ID from one element to another using JavaScript

The oversized monitor is cut off halfway due to postcss-pxtorem

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Overlap between sidebar and navbar