html - 将选定的列表项向右移动并溢出

Question

我正在处理我在 bootstrap 中创建的侧边栏，但我不知道如何将选定的元素向右移动，并让它流过导航 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;
}

截图:

这是我的 fiddle : https://jsfiddle.net/09ogyde4/

Answer 1

您可以在 .sidebar 元素上使用 overflow-x: visible; 和 overflow-y: visible;，或者只是删除它行。