Question

我有一个简单的Bootstrap导航栏菜单，效果很好，但是我想在菜单div的底部添加一个小的可视指示器来显示当前活动的菜单项。

这看起来应该很容易，但特别注意到投影需要随着缩进而移动 - 我们如何做这样的事情？

一张图片胜过千言万语，下面补充一张。

HTML

<div class="navbar navbar-gradient navbar-static-top">
    <div class="container">
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav nav-pills">
                <li class="active">
                    <a href="#"><span class="glyphicon glyphicon-home" /></a>
                </li>
                <li>
                    <a href="#"><span class="glyphicon glyphicon-cog" /></a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/* gradient for main navigation bar */
.navbar-gradient {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    /* drop shadow */
    box-shadow: 3px 3px 3px #888888;
}

enter image description here

Answer 1

可能需要更多调整，但这是一个100％的CSS解决方案。

triangle

FIDDLE HERE

    @import url('http://getbootstrap.com/dist/css/bootstrap.css');

.triangle {
    margin-top:-7px;
    width: 0;
    height: 0;
    margin-left:31px;
}
.triangle::after {
    content:'';
    border-bottom: 0;
    height: 15px;
    width: 15px;
    background-color: #fff;
    position: absolute;
    -webkit-transform: rotate(45deg);
    z-index: 2;
    box-shadow: inset 2px -4px 9px #888;
}
.triangle-cover {
    position:absolute;
    margin-top:1px;
    margin-left:-7px;
    z-index:10;
    width: 0;
    height: 0;
    border-bottom: solid 17px white;
    border-left: solid 14px transparent;
    border-right: solid 14px transparent; 
}

并且在每个li中你想要active（并且你可能必须使用一点JS将这些元素插入到li的DOM中才能激活...）

        <li class="active"><a href="#"><img src="http://icons.iconarchive.com/icons/ampeross/qetto-2/48/settings-icon.png" /></a>
            <div class="triangle"><span class="triangle-cover"></span></div>
        </li>

Answer 2

以下是包含.png图片的解决方案：

<强> FIDDLE

我把这个添加到你css：

li.active{position:relative;}
li.active::after{
    content:"";
    background: transparent url("http://i41.tinypic.com/29ofuoh.png") no-repeat center center;
    background-size: 15px 17px;
    height:17px;
    width:100%;
    position:absolute;
    top:43px;
    left:0;
}

Answer 3

您可以使用以下内容。至少如果你不想使用图像并且不介意CSS变换（其他选项可能包括使用图像，可能使用CSS背景或SVG绘制东西。）

Example

demo

.box{
    height: 40px;
    width: 200px;
    position: relative;
    box-shadow: 3px 3px 3px #888;
    background: #f4f4f4;
}

.box::after{
    display: block;
    content: " ";
    width: 15px;
    height: 15px;
    background: #fff;
    box-shadow: inset 10px 10px 3px -7px #888;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    bottom: -8px;
    right: 50px;
}

CSS：活动菜单项下方边框中的“缩进”

3 个答案: