如何修改sidenav中的活动高亮

我有一个sidenav与一些菜单项，现在我有一个活动类应用到当前李，它会突出显示与背景颜色李（在这种情况下：＃3596d5）。如何修改sidenav中的活动高亮

除了突出显示整个li外，我还想在文本左侧突出显示一小段（约10像素），我想不出有什么办法可以做到这一点。

这里是我要找的Photoshop处理结果：

The style I am looking for

我目前的HTML：

<nav class="nav-primary"> 
    <ul class="nav nav-main"> 
     <li class="active"> 
      <a class="auto nav-item text-white" href="#"> 
       <span>Home</span> 
      </a> 
     </li> 
     <li class=""> 
      <a class="auto nav-item" href="#"> 
       <span>Item 2</span> 
      </a> 
     </li> 
     <li class=""> 
      <a class="auto nav-item" href="#"> 
       <span>Item 3</span> 
      </a> 
     </li> 
     <li class=""> 
      <a class="auto nav-item" href="#"> 
       <span>Item 4</span> 
      </a> 
     </li> 
     <li class=""> 
      <a class="auto nav-item" href="#"> 
       <span>Item 4</span> 
      </a> 
     </li> 
    </ul> 
</nav>

我现在的CSS：

.text-white { 
    color: white; 
} 
.nav-primary ul.nav > li > a { 
    padding: 15px 
} 
nav { 
    background-color: black; 
} 
.active { 
    background-color: #3596d5;

}

我的jsfiddle是here（这是使用引导外部资源）

任何帮助，将不胜感激。

来源

2014-09-03 TJXStyles

看起来你可以设置有源元件上的'边界left'财产。 – 2014-09-03 21:16:41

你可以使用::之前是这样的：

.active::before{ 
    content: ' '; 
    width: 10px; 
    height: 50px; 
    background-color: #3596d5; 
    display: inline-block; 
    position: absolute; 
}

见小提琴http://jsfiddle.net/vtp7omx2/3/

来源

2014-09-03 21:22:38 Kody

经过试验其他解决方案后，我喜欢这个最好的，它不需要任何调整的余地！谢谢！ – TJXStyles 2014-09-04 16:18:00

您可以使用一个渐变背景：

background: linear-gradient(to right, rgba(30, 87, 153, 1) 0px, rgba(32, 124, 202, 1) 10px, rgba(0, 0, 0, 1) 11px, rgba(0, 0, 0, 1) 100%);

http://jsfiddle.net/vtp7omx2/1/

来源

2014-09-03 21:17:05

添加到您的CSS：

.active { 
    background-color: #000; border-left:5px solid #069; 
}

see fiddle

来源

2014-09-03 21:19:06 Devin

这真的很好，我甚至都没有想过！谢谢！ – TJXStyles 2014-09-03 21:24:55

如何修改sidenav中的活动高亮

回答

相关问题