Как сделать так, чтобы боковые меню открывались по умолчанию для широких разрешений p c

Question

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

Я реализовал это, но проблема в том, что когда вы впервые открываете страницу на большом экране и нажимаете на ссылки, меню каждый раз плавно перемещается влево. Как исправить меню на больших экранах, чтобы оно не появлялось каждый раз, когда я нажимаю на ссылку? Видео с ошибкой

if ($(window).width() <= 1770) {
  $('.leftcolumn__close-link').on('click', function() {
    $('.leftcolumn').toggleClass('open');
    $('#overlay').toggle();
    $('body').toggleClass('position-fixed');
  })

  $('#overlay').on('click', function() {
    $('#overlay').hide();
    $('.leftcolumn').toggleClass('open');
    $('body').toggleClass('position-fixed');
  })
} else {
  $('.leftcolumn').addClass('stable');
  $('.leftcolumn__close-link').on('click', function() {
    $('.leftcolumn').toggleClass('stable');
  })
}

.leftcolumn {
  width: 0px;
  transition: all 0.3s ease;
  z-index: 2;
}

.leftcolumn__header {
  display: flex;
  padding: 0px;
  background: #fff;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}

.leftcolumn__logo {
  display: none;
  transition: all 0.4s ease;
}

.leftcolumn__logo img {
  height: 50px;
  padding: 5px 0px;
}

.leftcolumn__close-link {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  width: 25px;
  margin-left: 15px;
  position: relative;
}

.leftcolumn__close-link span.burger {
  background: #b4b8ce;
  display: block;
  height: 2px;
  min-height: 2px;
  width: 100%;
  border-radius: 2px;
  transition: all 0.4s ease;
  left: auto;
  right: 0px;
  position: absolute;
}

.leftcolumn__close-link span.burger::before {
  content: '';
  background: #b4b8ce;
  transition: all 0.4s ease;
  height: 2px;
  min-height: 2px;
  border-radius: 2px;
  width: 50%;
  top: -8px;
  left: auto;
  right: 0px;
  position: absolute;
}

.leftcolumn__close-link span.burger::after {
  content: '';
  background: #b4b8ce;
  transition: all 0.4s ease;
  height: 2px;
  min-height: 2px;
  border-radius: 2px;
  width: 75%;
  bottom: -8px;
  position: absolute;
  left: auto;
  right: 0px;
}

.leftcolumn__close-link:hover {
  text-decoration: none;
}

.leftcolumn__close-link span.close {
  opacity: 1;
}

.leftcolumn__close-link span.close i {
  opacity: 0;
}

.leftcolumn__close-link span.close i::before {
  color: #b4b8ce;
  font-weight: 600;
  font-size: 20px;
}

.leftcolumn.open {
  width: 275px;
  transition: all 0.3s ease;
}

.leftcolumn.open .leftcolumn__header {
  padding: 0px 15px;
}

.leftcolumn.open .leftcolumn__logo {
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn.open .leftcolumn__close-link {
  justify-content: flex-end;
}

.leftcolumn.open .leftcolumn__close-link .burger {
  display: none;
}

.leftcolumn.open .leftcolumn__close-link .close {
  display: block;
}

.leftcolumn.open .leftcolumn__close-link .close i {
  opacity: 1;
  transition: opacity 0.8s linear;
}

.leftcolumn .stable {
  min-width: 275px;
}

.leftcolumn__nav {
  overflow: auto;
  position: relative;
  max-height: 650px;
}

.leftcolumn__nav-list {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.leftcolumn__nav-list>li {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
  background-color: rgba(4, 144, 55, 0.95);
  background-image: linear-gradient(to right, transparent 65%, rgba(94, 192, 83, 0.95));
  border-top: 1px solid #5ec053;
}

.leftcolumn__nav-list>li>a {
  color: #fff;
  padding: 9px 18px;
  min-height: 44px;
  display: flex;
  flex-grow: 1;
  align-items: center;
  text-decoration: none;
  position: relative;
  outline: none;
}

.leftcolumn__nav-list>li>a i {
  padding-right: 10px;
}

.leftcolumn__nav-list>li>a i.leftcolumn__nav-icon {
  font-size: 2rem;
}

.leftcolumn__nav-list>li>a i.leftcolumn__nav-arrow {
  font-size: 0.6rem;
}

.leftcolumn__nav-list>li>a[aria-expanded="true"] .leftcolumn__nav-arrow::before {
  transform: rotateZ(90deg);
  /*rtl:ignore*/
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn__nav-list>li>a[aria-expanded="false"] .leftcolumn__nav-arrow::before {
  transform: rotateZ(0deg);
  /*rtl:ignore*/
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn__nav-list>li>a span {
  display: block;
  flex-grow: 1;
  margin-left: 20px;
  margin-top: -5px;
  padding: 7px 0 7px 0;
  font-family: 'LatoBold', Verdana, sans-serif;
  color: #f9b200;
  font-size: 19px;
  text-transform: uppercase;
  line-height: 23.5px;
}

.leftcolumn__nav-list>li>a span strong {
  font-weight: normal;
  padding-left: 35px;
  color: #fff;
  text-transform: none;
}

.leftcolumn__nav-list>li:hover>a,
.leftcolumn__nav-list>li.leftcolumn__nav--open>a {
  background-color: rgba(249, 178, 0, 1);
  background-image: linear-gradient(to right, transparent 65%, rgba(94, 192, 83, 0.45));
}

.leftcolumn__nav-list>li:hover>a span,
.leftcolumn__nav-list>li.leftcolumn__nav--open>a span {
  color: #69614e;
}

.leftcolumn__submenu-list {
  margin: 0px;
  padding: 0px;
}

.leftcolumn__submenu-list li {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  float: none;
  padding: 0;
  background-color: rgba(94, 192, 83, 1);
  background-image: linear-gradient(to right, transparent 85%, rgba(4, 144, 55, 0.45));
  border-top: 1px solid #35aa46;
}

.leftcolumn__submenu-list li a {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 18px 14px 25px;
  text-decoration: none;
}

.leftcolumn__submenu-list li a i {
  flex: 0 0 35px;
  font-size: 1.1rem;
  color: #fff;
}

.leftcolumn__submenu-list li a span {
  color: #fff;
  font-size: 14px;
  margin-left: 20px;
  padding: 0px;
}

.leftcolumn__submenu-list li:hover a,
.leftcolumn__submenu-list li.leftcolumn__submenu--open a {
  transition: all 0.5s ease;
  background-color: rgba(4, 144, 55, 0.45);
  background-image: linear-gradient(to right, transparent 85%, rgba(4, 144, 55, 0.65));
}

.leftcolumn__submenu-list li:hover a i,
.leftcolumn__submenu-list li.leftcolumn__submenu--open a i {
  transition: all 0.5s ease;
  color: #f9b200;
}

.leftcolumn__punkte {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.leftcolumn__punkte a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background-color: rgba(255, 255, 255, 0.6) !important;
  background-image: linear-gradient(to right, transparent 85%, rgba(255, 255, 255, 0.5)) !important;
  border-bottom: 1px solid #5ec053;
  border-top: 1px solid #5ec053;
}

.leftcolumn__punkte a:hover {
  text-decoration: none;
  opacity: 0.9;
}

.leftcolumn__punkte-icon {
  color: #fff;
  flex: 0 0 35px;
  font-size: 1.9rem;
  padding-right: 10px;
}

.leftcolumn__punkte-box {
  font-family: 'LatoBold', Verdana, sans-serif;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 5px 15px;
  border-radius: 8px;
  justify-content: flex-end;
  color: #69614e;
}

.leftcolumn__punkte-box i {
  font-size: 1.4rem;
}

.leftcolumn__punkte-summ {
  margin-bottom: 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
}

.leftcolumn__punkte-summ span {
  padding: 0px 5px;
  display: flex;
  align-items: center;
}

.leftcolumn__punkte-summ span i {
  padding-right: 5px;
}

.leftcolumn__punkte-summ span i.points-1 {
  color: #981113;
}

.leftcolumn__punkte-summ span i.points-2 {
  color: #ffd100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="leftcolumn">
  <div class="leftcolumn__header">
    <div class="leftcolumn__logo">
      <a href="/"><img alt="logo" src="https://picsum.photos/200/300" height="50" title="Start"></a>
    </div>
    <div class="leftcolumn__close">
      <a href="#" class="leftcolumn__close-link">
        <span class="burger"></span>
        <span class="close">X</span>
      </a>
    </div>
  </div>
  <div class="leftcolumn__nav ps ps--active-x">
    <ul id="accordion" class="leftcolumn__nav-list">
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav4">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-graduation-cap"></i>
          <span>Wiki<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav4" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-book"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-bug"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-tasks"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-video"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="">
        <a href="#">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-newspaper fa-2x"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
      </li>
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav10">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-box-open"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav10" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="/produkt-lounge/produktkatalog">
                <i class="m-menu__link-icon fa fa-book-open"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="/produkt-lounge/produkt-tests">
                <i class="m-menu__link-icon fa fa-file-alt"></i>
                <span>Produkt-Tests</span>
              </a>
            </li>
            <li class="">
              <a href="/produkt-lounge/verkaufstipps">
                <i class="m-menu__link-icon fa fa-lightbulb"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav33">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-users fa-2x"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav33" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="/community-lounge/pinnwand">
                <i class="m-menu__link-icon fa fa-comments"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="/community-lounge/spielle">
                <i class="m-menu__link-icon fa fa-gamepad"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="ps__rail-x" style="width: 0px; left: 0px; bottom: 0px;">
      <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
    </div>
    <div class="ps__rail-y" style="top: 0px; right: 0px;">
      <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
    </div>
  </div>
</aside>

Answer 1

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

<style>
.leftcolumn {
  width: 0px;
  transition: all 0.3s ease;
  z-index: 2;
}


.leftcolumn__header {
  display: flex;
  padding: 0px;
  background: #fff;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}

.leftcolumn__logo {
  display: none;
  transition: all 0.4s ease;
}

.leftcolumn__logo img {
  height: 50px;
  padding: 5px 0px;
}

.leftcolumn__close-link {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  width: 25px;
  margin-left: 15px;
  position: relative;
}

.leftcolumn__close-link span.burger {
  background: #b4b8ce;
  display: block;
  height: 2px;
  min-height: 2px;
  width: 100%;
  border-radius: 2px;
  transition: all 0.4s ease;
  left: auto;
  right: 0px;
  position: absolute;
}

.leftcolumn__close-link span.burger::before {
  content: '';
  background: #b4b8ce;
  transition: all 0.4s ease;
  height: 2px;
  min-height: 2px;
  border-radius: 2px;
  width: 50%;
  top: -8px;
  left: auto;
  right: 0px;
  position: absolute;
}

.leftcolumn__close-link span.burger::after {
  content: '';
  background: #b4b8ce;
  transition: all 0.4s ease;
  height: 2px;
  min-height: 2px;
  border-radius: 2px;
  width: 75%;
  bottom: -8px;
  position: absolute;
  left: auto;
  right: 0px;
}

.leftcolumn__close-link:hover {
  text-decoration: none;
}

.leftcolumn__close-link span.close {
  opacity: 1;
}

.leftcolumn__close-link span.close i {
  opacity: 0;
}

.leftcolumn__close-link span.close i::before {
  color: #b4b8ce;
  font-weight: 600;
  font-size: 20px;
}

.leftcolumn.open {
  width: 275px;
  transition: all 0.3s ease;
}

.leftcolumn.open .leftcolumn__header {
  padding: 0px 15px;
}

.leftcolumn.open .leftcolumn__logo {
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn.open .leftcolumn__close-link {
  justify-content: flex-end;
}

.leftcolumn.open .leftcolumn__close-link .burger {
  display: none;
}

.leftcolumn.open .leftcolumn__close-link .close {
  display: block;
}

.leftcolumn.open .leftcolumn__close-link .close i {
  opacity: 1;
  transition: opacity 0.8s linear;
}

.leftcolumn.stable {
  width: 275px !Important;
  transition: none !Important;
}
.leftcolumn.stable .leftcolumn__header {
  padding: 0px 15px;
}

.leftcolumn.stable .leftcolumn__logo {
  display: block;
}

.leftcolumn.stable .leftcolumn__close-link {
  justify-content: flex-end;
}

.leftcolumn.stable .leftcolumn__close-link .burger {
  display: none;
}

.leftcolumn.stable .leftcolumn__close-link .close {
  display: block;
}

.leftcolumn.stable .leftcolumn__close-link .close i {
  opacity: 1;
}


.leftcolumn__nav {
  overflow: auto;
  position: relative;
  max-height: 650px;
}

.leftcolumn__nav-list {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.leftcolumn__nav-list>li {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
  background-color: rgba(4, 144, 55, 0.95);
  background-image: linear-gradient(to right, transparent 65%, rgba(94, 192, 83, 0.95));
  border-top: 1px solid #5ec053;
}

.leftcolumn__nav-list>li>a {
  color: #fff;
  padding: 9px 18px;
  min-height: 44px;
  display: flex;
  flex-grow: 1;
  align-items: center;
  text-decoration: none;
  position: relative;
  outline: none;
}

.leftcolumn__nav-list>li>a i {
  padding-right: 10px;
}

.leftcolumn__nav-list>li>a i.leftcolumn__nav-icon {
  font-size: 2rem;
}

.leftcolumn__nav-list>li>a i.leftcolumn__nav-arrow {
  font-size: 0.6rem;
}

.leftcolumn__nav-list>li>a[aria-expanded="true"] .leftcolumn__nav-arrow::before {
  transform: rotateZ(90deg);
  /*rtl:ignore*/
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn__nav-list>li>a[aria-expanded="false"] .leftcolumn__nav-arrow::before {
  transform: rotateZ(0deg);
  /*rtl:ignore*/
  transition: all 0.3s ease;
  display: block;
}

.leftcolumn__nav-list>li>a span {
  display: block;
  flex-grow: 1;
  margin-left: 20px;
  margin-top: -5px;
  padding: 7px 0 7px 0;
  font-family: 'LatoBold', Verdana, sans-serif;
  color: #f9b200;
  font-size: 19px;
  text-transform: uppercase;
  line-height: 23.5px;
}

.leftcolumn__nav-list>li>a span strong {
  font-weight: normal;
  padding-left: 35px;
  color: #fff;
  text-transform: none;
}

.leftcolumn__nav-list>li:hover>a,
.leftcolumn__nav-list>li.leftcolumn__nav--open>a {
  background-color: rgba(249, 178, 0, 1);
  background-image: linear-gradient(to right, transparent 65%, rgba(94, 192, 83, 0.45));
}

.leftcolumn__nav-list>li:hover>a span,
.leftcolumn__nav-list>li.leftcolumn__nav--open>a span {
  color: #69614e;
}

.leftcolumn__submenu-list {
  margin: 0px;
  padding: 0px;
}

.leftcolumn__submenu-list li {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  float: none;
  padding: 0;
  background-color: rgba(94, 192, 83, 1);
  background-image: linear-gradient(to right, transparent 85%, rgba(4, 144, 55, 0.45));
  border-top: 1px solid #35aa46;
}

.leftcolumn__submenu-list li a {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 18px 14px 25px;
  text-decoration: none;
}

.leftcolumn__submenu-list li a i {
  flex: 0 0 35px;
  font-size: 1.1rem;
  color: #fff;
}

.leftcolumn__submenu-list li a span {
  color: #fff;
  font-size: 14px;
  margin-left: 20px;
  padding: 0px;
}

.leftcolumn__submenu-list li:hover a,
.leftcolumn__submenu-list li.leftcolumn__submenu--open a {
  transition: all 0.5s ease;
  background-color: rgba(4, 144, 55, 0.45);
  background-image: linear-gradient(to right, transparent 85%, rgba(4, 144, 55, 0.65));
}

.leftcolumn__submenu-list li:hover a i,
.leftcolumn__submenu-list li.leftcolumn__submenu--open a i {
  transition: all 0.5s ease;
  color: #f9b200;
}

.leftcolumn__punkte {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.leftcolumn__punkte a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background-color: rgba(255, 255, 255, 0.6) !important;
  background-image: linear-gradient(to right, transparent 85%, rgba(255, 255, 255, 0.5)) !important;
  border-bottom: 1px solid #5ec053;
  border-top: 1px solid #5ec053;
}

.leftcolumn__punkte a:hover {
  text-decoration: none;
  opacity: 0.9;
}

.leftcolumn__punkte-icon {
  color: #fff;
  flex: 0 0 35px;
  font-size: 1.9rem;
  padding-right: 10px;
}

.leftcolumn__punkte-box {
  font-family: 'LatoBold', Verdana, sans-serif;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 5px 15px;
  border-radius: 8px;
  justify-content: flex-end;
  color: #69614e;
}

.leftcolumn__punkte-box i {
  font-size: 1.4rem;
}

.leftcolumn__punkte-summ {
  margin-bottom: 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
}

.leftcolumn__punkte-summ span {
  padding: 0px 5px;
  display: flex;
  align-items: center;
}

.leftcolumn__punkte-summ span i {
  padding-right: 5px;
}

.leftcolumn__punkte-summ span i.points-1 {
  color: #981113;
}

.leftcolumn__punkte-summ span i.points-2 {
  color: #ffd100;
}

</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="leftcolumn">
  <div class="leftcolumn__header">
    <div class="leftcolumn__logo">
      <a href="/"><img alt="logo" src="https://picsum.photos/200/300" height="50" title="Start"></a>
    </div>
    <div class="leftcolumn__close">
      <a href="#" class="leftcolumn__close-link">
        <span class="burger"></span>
        <span class="close">X</span>
      </a>
    </div>
  </div>
  <div class="leftcolumn__nav ps ps--active-x">
    <ul id="accordion" class="leftcolumn__nav-list">
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav4">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-graduation-cap"></i>
          <span>Wiki<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav4" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-book"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-bug"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-tasks"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="#">
                <i class="m-menu__link-icon fa fa-video"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="">
        <a href="#">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-newspaper fa-2x"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
      </li>
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav10">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-box-open"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav10" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="/produkt-lounge/produktkatalog">
                <i class="m-menu__link-icon fa fa-book-open"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="/produkt-lounge/produkt-tests">
                <i class="m-menu__link-icon fa fa-file-alt"></i>
                <span>Produkt-Tests</span>
              </a>
            </li>
            <li class="">
              <a href="/produkt-lounge/verkaufstipps">
                <i class="m-menu__link-icon fa fa-lightbulb"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="">
        <a href="javascript:;" class="collapsed" data-toggle="collapse" data-target="#nav33">
          <i class="leftcolumn__nav-icon m-menu__link-icon fa fa-users fa-2x"></i>
          <span>Lorem<br><strong>Lorem</strong></span>
          <i class="leftcolumn__nav-arrow la la-angle-right"></i>
        </a>
        <div id="nav33" class="leftcolumn__submenu collapse " data-parent="#accordion">
          <ul class="leftcolumn__submenu-list">
            <li class="">
              <a href="/community-lounge/pinnwand">
                <i class="m-menu__link-icon fa fa-comments"></i>
                <span>Lorem</span>
              </a>
            </li>
            <li class="">
              <a href="/community-lounge/spielle">
                <i class="m-menu__link-icon fa fa-gamepad"></i>
                <span>Lorem</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="ps__rail-x" style="width: 0px; left: 0px; bottom: 0px;">
      <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
    </div>
    <div class="ps__rail-y" style="top: 0px; right: 0px;">
      <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
    </div>
  </div>
</aside>
<script>

$(document).ready(function(){
console.log($(window).width());
if ($(window).width() < 1440) {
  $('.leftcolumn__close-link').on('click', function() {
    $('.leftcolumn').toggleClass('open');
    $('body').toggleClass('position-fixed');
  })

} else {
  $('.leftcolumn').addClass('stable');
  $('.leftcolumn__close-link').on('click', function() {

    if($('.leftcolumn').hasClass('stable')) {
        $('.leftcolumn').removeClass('stable');
        $('.leftcolumn').addClass('open');
        $('body').addClass('position-fixed');
    }
    $('.leftcolumn').toggleClass('open');
    $('body').toggleClass('position-fixed');
  })
}

})
</script>