Переместить выбранный элемент списка вправо с переполнением

Question

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

Возможно, мне стоит использовать flexbox. Тогда я мог бы добавить ячейку спереди и рядом с пунктом меню. Затем, когда элемент выбран, я мог бы установить ширину в первой ячейке и ширину от 0 до последней. Другие (невыбранные) элементы могут иметь ширину в последней ячейке. Таким образом, я полагаю, что мог бы создать визуально то же самое.

В любом случае, предложения приветствуются.

HTML:

<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar vdl-sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item" ng-reflect-klass="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 11
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item selected">
      <a class="nav-link d-flex justify-content-between align-items-center">
        Item 13
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 14
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
  </ul>
</nav>

CSS:

/*
     * Sidebar
     */

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    /* Scrollable contents if viewport is shorter than content. */
    border-right: 1px solid #eee;
}

/* Sidebar navigation */

.sidebar {
    padding-left: 0;
    padding-right: 0;
}

.sidebar .nav {
    margin-bottom: 20px;
}

.sidebar .nav-item {
    width: 100%;
    background-color: #f9f9f9;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

@media (pointer: fine) {
    nav.vdl-sidebar a.nav-link:hover {
        background-color: lightgreen;
    }
}

.sidebar .nav-item+.nav-item {
    margin-left: 0;
}

.sidebar .nav-item+.nav-item.selected {
    margin-left: 20px;
    z-index: 2000;
}

.sidebar .nav-link {
    border-radius: 0;
}

nav.vdl-sidebar a.nav-link.active {
    background-color: green;
}

nav.vdl-sidebar a.nav-link:not(.active) {
    color: green;
}

.badge-pill {
    padding-bottom: 0.5em;
}

a {
    cursor: pointer;
}

.selected {
    margin-left: 1.5em;
    background-color: lightgreen;
}

Скриншот:

Вот моя скрипка: https://jsfiddle.net/09ogyde4/

Answer 1

Вы можете использовать overflow-x: visible; и overflow-y: visible; для элемента .sidebar или просто удалить эти строки.