我的bootstrap导航栏菜单遇到了困难。我想创建一个类似于此图像的“功能区”效果:
我创建了两个元素:after和:before属性但我无法在左侧部分创建三角形。
让我向您展示我的代码和codepen链接。
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Link2</a></li>
<li><a href="#contact">Link3</a></li>
<li><a href="#contact">Link4</a></li>
<li><a href="#contact">Link5</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
.navbar .navbar-nav li a{
color:white !important;
}
.navbar-nav li.active:before{
/*padding-top: 20px;*/
/*height:60px;*/
content: '';
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: #990033;
border-left-width: 0;
border-right-width: 0;
}
.navbar-nav li.active:after{
content: '';
position: absolute;
bottom: 30px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: #990033;
border-left-width: 0;
border-right-width: 0;
}
.navbar-nav li:not(.active):hover:before{
content: '';
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,85,140,0.4);
border-left-width: 0;
border-right-width: 0;
}
.navbar-nav li:not(.active):hover:after{
content: '';
position: absolute;
bottom: 30px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,85,140,0.4);
border-left-width: 0;
border-right-width: 0;
}
/*override bootstrap*/
.navbar-default{
background-color: white;
border-color: transparent;
margin-top:15px;
}
.navbar-nav > li > a {
padding-top:10px !important;
padding-bottom:10px !important;
}
.navbar {
min-height:40px !important;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
background-color:#FF671F;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
padding:0 60px 0 60px;
width: 100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-nav li.active a{
background-color: #990033 !important;
}
.navbar-default .navbar-nav>li>a:hover{
background-color: rgba(0,85,140,0.4);
}
结果:CodePen
我该怎么做?感谢
答案 0 :(得分:1)
注意: NOT 是否会随身高变化!高度硬编码,谨慎使用;高度可调; 如果需要,请使用JS动态调整高度并进行翻译
.nav {
margin-top: 30px;
height: 20px;
background-color: orange;
}
.nav-item {
margin: -10px 0 0 30px;
display:inline-block;
padding:10px;
color: white;
background-color: #AA0000;
position: relative;
font-family: "Helvetica";
box-shadow: 3px 2px 5px 0 rgba(0,0,0,0.4)
}
.nav-item:before {
position: absolute;
top: 0; left:-10px ; bottom:0;
display: inline-block;
content: '';
border-top: 10px solid #770000;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
transform: translateY(28px);
}
.nav-item:after {
position: absolute;
top: 0; left:-10px ; bottom:0;
display: inline-block;
content: '';
border-top: 10px solid #440000;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
transform: rotate(180deg) translateY(28px);
}
&#13;
<div class="nav">
<div class="nav-item">zeke</div>
<div class="nav-item">dran</div>
<div>
&#13;