导航栏边界突然激活

Question

我有一个简单的菜单，它位于页面的左侧。左边的CSS，在右边说，给边框。

代码：

#solutions .navbar_left{
    position: relative;
    float:left;
    width: 28.45982142857143%;
    height:auto;
    border-right: 2px solid #442a19;
}

当我点击我的菜单时，我想要在我点击的地方打破

减去的地方，右边的棕色边框应该断开并给它白色背景/透明

，我希望它是透明的..只在那一部分。我确实有该导航栏的活动类。 我正在为一个更好的例子添加一张照片。

正如你所看到的，在底部我添加了示例（在显示完整行的代码上），导航栏上的减号，我想要空格！...是否可能？

添加JsFiddle以更好地了解问题。

非常感谢。

Answer 1

这样的事情？

HTML：

<div class="navbar_left">
<h1>Our Solutions</h1>
<div class="Solutions">
    <div>
        <span>Solution 1</span>
        <div class='break_line'></div>
    </div> 
    <div>
        <span>Solution 2</span>
        <div class='break_line'></div>
    </div>
    <div>
        <span>Solution 3</span>
        <div class='break_line'></div>
    </div> 
</div>

CSS：

.navbar_left
{
    position: relative;
    float:left;
    width: 28.45982142857143%;
    height:auto;
    border-right: 2px solid #442a19;    
}

.Solutions > div
{
    padding: 20px 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}

.Solutions > div.current
{
    background: #fff;
}

.Solutions > div .break_line
{
    display: none;
}

.Solutions > div.current .break_line
{
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999;
    width: 2px;
    height: 100%;
    background: inherit;
}

Jquery的：

$(document).ready(function(){
    $('.Solutions > div').click(function(){
        $('.Solutions > div').removeClass('current');
        $(this).addClass('current');
    });    
});

关于jsfiddle的例子：http://jsfiddle.net/2joa40fv/1/

Answer 2

定位包围导航栏项目的div，并根据需要将其设置为相对位置，高度和宽度，将z-index设置为5，导航栏项目本身到z-index 6，它的背景颜色为白色。然后，单击导航栏项时，将该div设置为右侧的动画。它可以让你控制覆盖白线的位置，时间和方式。