Блог

У меня есть боковая панель начальной загрузки, в которой переключатель свертывания расположен наполовину на боковой панели, а наполовину на боковой панели, вот так.

При нажатии на кнопку я могу успешно свернуть боковую панель, однако я бы хотел, чтобы сама кнопка переходила в положение: абсолютный элемент и оставалась видимой, когда боковая панель сворачивается.

Я могу сделать это, используя некоторый jQuery, но он довольно уродливый и не имеет перехода. Я также не знаю, как заставить его вернуться в положение: относительное, как только пользователь снова откроет боковую панель.

Вот где я нахожусь в настоящее время…

   $('#sidebarCollapse').on('click', function () {
      $('#sidebar').toggleClass('active');
      $('#sidebarCollapse').css("position","absolute");
  });
  

Это html:

 <div class="wrapper d-flex align-items-stretch">
  <nav id="sidebar" class="active">
    <div class="custom-menu">
      <button type="button" id="sidebarCollapse" class="btn btn-primary">
        <i class="fas fa-bars"></i>
        <span class="sr-only">Toggle Menu</span>
      </button>
    </div>
    <div class="p-4">
      <h1><a href="index.html" class="logo">Flightology</a></h1>
      <ul class="list-unstyled components my-5">
        <li>
          <a href="#"><span class="fa fa-home mr-3"></span> Home</a>
        </li>
        <li>
            <a href="#"><span class="fa fa-user mr-3"></span> About</a>
        </li>
        <li>
          <a href="#"><span class="fa fa-briefcase mr-3"></span> one</a>
        </li>
        <li>
          <a href="#"><span class="fa fa-sticky-note mr-3"></span> two</a>
        </li>
        <li>
          <a href="#"><span class="fa fa-paper-plane mr-3"></span> three</a>
        </li>
      </ul>
    </div>
  </nav>

    <!-- Page Content  -->
  <div id="content" class="p-4 p-md-5 pt-5">
    <h2 class="mb-4">Sidebar #03</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
  

и это мой css

 body {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  background: #fafafa;
  color: gray;
}

a {
  -webkit-transition: .5s all ease;
  -o-transition: .5s all ease;
  transition: .5s all ease;
}

a:hover, a:focus {
  text-decoration: none !important;
  outline: none !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff!important;
}


.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#content {
  width: 100%;
  padding: 0;
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#sidebar {
  min-width: 270px;
  max-width: 270px;
  min-height: 100vh;
  background: #3C4F76;
  color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
}

#sidebar.active {
  margin-left: -270px;
}

@media (min-width: 768px) {
    #sidebar {
      margin-left: -270px;
    }
    #sidebar.active {
      margin-left: 0;
    }
}

#sidebar .custom-menu {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 0;
  margin-right: -20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#sidebar .custom-menu .btn.btn-primary {
  background: #AB9F9D;
  border-color: #AB9F9D;
}

#sidebar .custom-menu .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #3C4F76;
}



#sidebar h1 {
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 1.5rem;
}

#sidebar h1 .logo {
  color: #fff;
  text-decoration: none;
}

#sidebar ul.components {
  padding: 0;
}

#sidebar ul li {
  font-size: 16px;
}

#sidebar ul li.active > a {
  background: transparent;
  color: #fff;
}

#sidebar ul li a {
  padding: 10px 0;
  display: block;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.p-4 {
  padding: 1.5rem !important;
}

.p-md-5 {
  padding: 3rem !important;
}
  

Обновить

Я добавил класс

 .btn-toggled {
  position: absolute;
}
  

И я могу переключить это с помощью jQuery, однако переход все еще довольно уродлив. Есть ли способ перехода между относительным и абсолютным позиционированием?

   $('#sidebarCollapse').on('click', function () {
      $('#sidebar').toggleClass('active');
      $('#sidebarCollapse').toggleClass('btn-toggled');
  });