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

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

• 使用::before和::after伪元素（其高度等于父元素高度的50％）创建2层。
• 在这些层上应用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 2

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

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

CSS三角形

由于这里已经对它进行了很好的解释，所以我在这里不做解释：https://css-tricks.com/snippets/css/css-triangle/

这里的想法是使用活动:before中的nav-link来制作一个白色背景的三角形。

计算

如果要使三角形的尖端位于菜单的中间，则需要计算其总高度。

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

然后将其除以2，得到边框顶部和底部的宽度。

Answer 3

使用box-shadow和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>