Как сделать свернутую прокрутку боковой панели - bootstrap 4 - PullRequest
Новая
       52

Как сделать свернутую прокрутку боковой панели - bootstrap 4

0 голосов
/ 14 марта 2019

Я разрабатываю интерфейсы веб-приложений с угловым 5. При нажатии на кнопку у меня сваливается боковая панель.

Когда он свернулся, я добавил функцию: отображение подменю и ссылок при наведении на значки

Это .html 

<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
  <div class="list-group">
    <div class="has-submenu" *ngFor="let el of els">
      <a [routerLink]="el.link" [routerLinkActive]="['router-link-active']" class="list-group-item">
        <i class="fa fa-book"></i>&nbsp;
        <span>{{ el.name }}</span>
      </a>
    <div class="submenu" *ngIf="x?.length > 0 || collapsed">
      <a [routerLink]="el.route" *ngIf="collapsed" style="padding: 0px;">
        <span style="padding: 0.30rem 1.0rem">book1</span>
        <hr *ngIf="y.length > 0"/>
      </a>
      <a *ngFor="let i of listNames" (click)="goToPage(i)">
       <span>sub names</span>
      </a>
    </div>
 </div>
 <a [routerLink]="['/link']" class="list-group-item">
  <i class="fa fa-table"></i>&nbsp;
  <span>Books</span>
 </a>
 <a [routerLink]="['/link2']" class="list-group-item">
   <i class="fa fa-book"></i>&nbsp;
   <span>Books</span>
 </a>

и .scss: 

 $topnav-background-color: #222;
.sidebar {
  border-radius: 0;
  position: fixed;
  z-index: 1000;
  top: 56px;
  left: 235px;
  width: 235px;
  margin-left: -235px;
  border: none;
  border-radius: 0;
  //overflow-y: auto;
  background-color: $topnav-background-color;
  bottom: 0;
 // overflow-x: hidden;
 padding-bottom: 40px;
 -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  // border-top: 1px solid rgba(255,255,255,0.3);
  .list-group {
  margin-bottom: 40px;
  a.list-group-item {
  background: $topnav-background-color;
  border: 0;
  border-radius: 0;
  color: #999;
  text-decoration: none;

  .fa {
    margin-right: 10px;
  }
}
a:hover {
  background: darken($topnav-background-color, 5%);
  color: #fff;
}
a.router-link-active {
  background: darken($topnav-background-color, 5%);
  color: #fff;
}
.header-fields {
  padding-top: 10px;

  > .list-group-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
}
 .sidebar-dropdown {
  *:focus {
    border-radius: none;
     border: none;
   }
.panel-title {
  font-size: 1rem;
  height: 50px;
  margin-bottom: 0;
  a {
    color: #999;
    text-decoration: none;
    font-weight: 400;
    background: $topnav-background-color;
    span {
      position: relative;
      display: block;
      padding: 0.75rem 1.5rem;
      padding-top: 1rem;
    }
  }
  a:hover,
  a:focus {
    color: #fff;
    outline: none;
    outline-offset: -2px;
  }
}
.panel-title:hover {
  background: darken($topnav-background-color, 5%);
}
.panel-collapse {
  border-radious: 0;
  border: none;
  .panel-body {
    .list-group-item {
      border-radius: 0;
      background-color: $topnav-background-color;
      border: 0 solid transparent;
      a {
        color: #999;
      }
      a:hover {
        color: #fff;
      }
    }
    .list-group-item:hover {
      background: darken($topnav-background-color, 5%);
    }
   }
   }
   }
  }

.nested-menu {
  .list-group-item {
  cursor: pointer;
  }
 .nested {
   list-style-type: none;
  }
 ul.submenu {
   display: none;
   height: 0;
   }
   & .expand {
      ul.submenu {
      display: block;
      list-style-type: none;
      height: auto;

      li {
        a {
          color: #fff;
          padding: 10px;
          display: block;
        }
      }
     }
   }
 }

 @media screen and (max-width: 992px) {
  .sidebar {
    top: 54px;
    left: 0px;
    }
 }

 @media (min-width: 992px) {
 .header-fields {
   display: none;
  }
 }

  ::-webkit-scrollbar {
  width: 8px;
  }

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
  border-radius: 3px;
 }

::-webkit-scrollbar-thumb {
   border-radius: 20px;
  -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
 }

.toggle-button {
position: fixed;
width: 236px;
cursor: pointer;
padding: 1px;
bottom: 0;
color: #999;
background: #212529;
i {
 font-size: 23px;
 }
&:hover {
 background: darken($topnav-background-color, 5%);
 color: #fff;
 }

border-top: 1px solid #999;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.collapsed {
 width: 50px;

  span {
   display: none;
 }
}

.toggle-button.collapsed {
 margin-left: 0px;
}

.sidebar .submenu {
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
z-index: 598;
width: 100%;
background-color: #222222;
color: white;
text-align: left;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
list-style: none;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}

.sidebar .submenu a {
float: left;
display: block;
width: 100%;
padding: 0.30rem 1.0rem;
clear: both;
font-size: 16px;
font-weight: 400;
color: #999;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}

.sidebar .submenu a:hover {
 color: white !important;
 background-color: black;
}

.sidebar .has-submenu:hover > .submenu {
  visibility: visible;
}

.sidebar .has-submenu {
 float: left;
 min-height: 1px;
 line-height: 1.5em;
 vertical-align: middle;
position: relative;
 }

.sidebar .has-submenu:hover {
position: relative;
z-index: 599;
cursor: default;
}

.collapsed .submenu span {
  display: block !important;
}

.submenu span {
   font-size: small;
   white-space: normal !important;
      }

hr{
 height: 1px;
 background-color: grey;
 border: none;
 padding: 0px;
 margin: 5px;
 width: 100%;
 }

Я знаю, что слишком много CSS, но я нашел единственный способ реализовать эту функцию. Проблема теперь в том, что при создании подменю, показанного при наведении, прокрутка отключена (чтобы показать подменю, я закомментировал overflow-y: auto;, иначе он не появится при наведении курсора).

enter image description here

Как вы можете видеть на картинке, наведите курсор на подменю, но оно не прокручивается. Я хочу, чтобы подменю появлялись при наведении курсора, а боковая панель прокручивалась.

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

EDIT:

когда я комментирую 

.sidebar .has-submenu:hover > .submenu {
   visibility: visible;
 }

и я добавил overflow-y: scroll; в .sidebar класс, прокрутка работает, но та же проблема. Может быть, visibility: visible не работает вместе с overflow-y .. Есть ли способ изменить visiblity:visible на что-то, что делает то же самое?

Я пытался заменить visibility:visible на opacity:1;, но это ни к чему не привело.

Большое спасибо.

...