html可折叠边栏,html – 仅使用CSS的可折叠灵活宽边栏

如何更改宽度而不是点击位置？在这种情况下,我使用max-width,它与未知宽度几乎相同.这可能会导致侧边栏上的内容重排,因此如果可以接受,请使用white-space：nowrap.

body {

margin: 0;

}

.container {

display: flex;

}

.sidebar {

background: #ccc;

transition: all .1s;

max-width: 1000px;

}

.sidebar.collapsed {

max-width: 0;

overflow: hidden;

}

SIDEBAR

lorem bla bla

toggle Sidebar

另一种解决方法是将变换宽度位置一起使用,但动画效果会略有不同.

body {

margin: 0;

}

.container {

display: flex;

}

.sidebar {

background: #ccc;

transition: all .1s;

}

.sidebar.collapsed {

transform: translateX(-100%);

position: absolute;

}

SIDEBAR

lorem bla bla

toggle Sidebar