Question

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

类似于Youtube页面的屏幕较小，并且边栏上会显示登录选项。

这是我到目前为止的代码：JSFIDDLE

＆＃13;

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

＆＃13;

Answer 1

在你的JSFiddle中改变css（top必须为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%;

}

侧边栏切换，推顶杆

1 个答案: