css - 切换侧边栏，插入顶栏

Question

我想要实现的是: 不使用 javascript/jquery。 我有一个顶栏和一个侧边栏。在较小的屏幕上，我希望边栏折叠并在顶部有一个按钮，当单击该按钮时，边栏水平切换，为背景添加不透明度，将按钮放在顶栏上，并将顶栏内的所有内容放在里面侧边栏。

类似于 Youtube 页面屏幕较小时，登录选项出现在侧边栏上。

这是我目前的代码:JSFIDDLE

<header>
  <nav class="navbar navbar-expand-sm  fixed-top navbar-light bg-faded">
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <img class="navbar-brand navbar-logo" src="" />

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav ml-auto user-info">
        <li class="avatar">
          <img src="">
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link ">Hello</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<div class="container-fluid">
  <div id="mySidenav">
    <nav class="col-sm-3 col-md-3 col-6 col-lg-2 d-sm-block sidebar collapse 
    width " id="sidebar">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
          <a class="nav-link">
            <img src="" />Home </a>
        </li>
        <ul class="sub-menu collapse" id="home">
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu1</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu2</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu3</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu4</a>
          </li>
        </ul>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="a" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
      </ul>
    </nav>
  </div>
  <main role="main" class="col-sm-9  ml-sm-auto col-md-9 col-lg-10 pt-3 content">
    <h1>
      Main Content here
    </h1>
  </main>
</div>

Answer 1

在您的 JSFiddle 中更改 css(顶部必须为 0px):JsFiddle

.sidebar {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 1;
  padding: 0;
  overflow-x: hidden;

/* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
  background-color: black;
  height: 100%;

}