如何在单击侧面导航栏元素时制作书签类功能区？

Question

我的应用程序中有一个侧面导航栏，它包含 4 个导航项。在初始加载时，它们应该如下所示 -

单击每个项目时，该项目的背景应更改如下 -

我已经尝试了下面的代码（对 CSS 的了解有限）并且能够得到第一张图片中显示的内容。对于第二张图片，它显示如下，应该像第二张图片一样完成。

HTML

<div class="container">
  <nav class="col-sm-3">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="javascript:void(0);">Item 1</a></li>
      <li><a href="javascript:void(0);">Item 2</a></li>
      <li><a href="javascript:void(0);">Item 3</a></li>
      <li><a href="javascript:void(0);">Item 4</a></li>
   </ul>
  </nav>
</div>

CSS

.nav-pills>li {
   margin-left: -5px;
}
.nav-pills>li {
   width: 90%;
}
.nav-pills>li>a{
  color: #0D0D0D;
  background-color: #e1e1e1;
  padding: 15px;
}

.nav-pills>li>a:focus, .nav-pills>li>a:active{
  /*background-color: white;*/
  border:       30px solid lightgreen;
  border-left:  30px solid transparent;
  border-right: 0;
  width:        100%;

}

Answer 1

我正在使用 bootstrap4 发布我的答案，但这里的关键点与使用 bootstrap3 还是 bootstrap4 无关。这里的关键点是如何制作三角形。

演示：http://jsfiddle.net/aq9Laaew/81019/

CSS三角形

这里已经解释的很好了，这里就不解释了：https://css-tricks.com/snippets/css/css-triangle/

这里的思路是利用activenav-link的:before做一个白底三角形

计算

如果想让三角形的尖端在菜单正中间，需要计算它的总高度。

Total height = border top (1px) + 
               padding top (1rem) +
               line height (1.5 x 1rem = 1.5rem) +
               padding bottom (1rem) +
               border bottom (1px)

然后将它除以 2 为边框顶部和底部的宽度。

Answer 2

使用::before和::after伪元素创建 2 层，这些伪元素的高度等于父元素高度的 50%。
在这些图层上应用 background、border-radius 和其他必要的 CSS 属性。
在悬停时使用 skewX() 变换来创建三角形效果。

演示：

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #333 url("https://k39.kn3.net/A01CCB6AE.jpg") no-repeat;
  background-size: cover;
  height: 100vh;
  padding: 10px;
  margin: 0;
}

.nav {
  font-family: Arial, sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li + li {
  margin-top: 3px;
}

.nav li a {
  text-decoration: none;
  border-radius: 2px;
  position: relative;
  padding: 12px 18px;
  overflow: hidden;
  display: block;
  color: #000;
}

.nav li a::before,
.nav li a::after {
  transition: transform .2s linear;
  transform-origin: left top;
  background-color: #dcdcdc;
  position: absolute;
  opacity: 0.5;
  content: '';
  height: 50%;
  z-index: -1;
  right: 0;
  left: 0;
  top: 0;
}

.nav li a::after {
  transform-origin: left bottom;
  top: auto;
  bottom: 0;
}


.nav li a:hover::before {
  transform: skewX(30deg);
}

.nav li a:hover::after {
  transform: skewX(-30deg);
}

<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Answer 3

使用box-shadow and Pseudo-elements

*{
  box-sizing:border-box
}
body {
   width: 100wh;
   height: 100vh; 
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
   background-size: 400% 400%; 
   animation: Gradient 15s ease infinite;
   }


   @keyframes Gradient {
  0%,100% { background-position: 0% 50% }
  50% { background-position: 100% 50% } 
} 
menu{
  margin: 40px auto;
  position: relative; 
  max-width: 320px
}
menu li{
  position: relative;
  list-style: none;
  overflow: hidden;  
  margin-bottom: 2px
}
menu li:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
    height: 40px;
    width: 40px;
    opacity:0;
    margin-left: -30px;
    box-shadow: 0px 0px 0px 480px #d1e3ab;
    transform-origin: center;
    transform: rotate(45deg);
}
menu a{
  display: block;
  text-decoration: none;
  color:#5e5e5e;
  font-size: 14px;
  background-color: #e1e1e1;
  padding: 12px 10px;
  text-indent: 24px;
} 
menu li:hover a{ 
  background-color: transparent; 
}
menu li:hover:before{ 
  opacity:1
}

<menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</menu>

如何在单击侧面导航栏元素时制作书签类功能区？

How to make Bookmark kind of Ribbon on click of side navbar element?

html

css

css-shapes

CSS三角形

计算