问题描述
我正在使用带有大型菜单下拉菜单的 bootstrap v4.4.1 导航栏。
我想在下拉菜单的顶部添加一个三角形。我已经找到了如何添加三角形的方法,但是我无法在父nav-link
中将三角形居中,而无法通过mega菜单和/或下拉菜单居中。关于如何使三角形相对于父元素居中有任何想法吗?
.dropdown-menu::before {
border-bottom: 10px solid #002a54;
border-left: 10px solid rgba(0,0);
border-right: 10px solid rgba(0,0);
content: "";
display: inline-block;
left: 50%;
position: absolute;
bottom: -12px;
}
解决方法
恐怕如果您想将traignle与父项.nav-link
居中,则可能需要稍微改变样式。想法是将.nav-link
的位置设置为相对,并将其:before
设置为三角形并将其位置设置为绝对。
Megamenu布局
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown mega">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" />
<div class="dropdown-menu">
<div class="mega-content">
<div class="container-fluid">
...
</div>
</div>
</div>
</li>
</ul>
</div>
三角形样式
在:before
上使用它而不是.dropdown-menu
上的.dropdown-toggle
。另外,我仅在打开下拉菜单时才设置样式。
.dropdown.mega.show .dropdown-toggle {
position: relative;
}
.dropdown.mega.show .dropdown-toggle:before {
border-bottom: 10px solid #002a54;
border-left: 10px solid rgba(0,0);
border-right: 10px solid rgba(0,0);
width: 0;
height: 0;
content: "";
display: inline-block;
left: calc(50% - 10px);
position: absolute;
bottom: -.5rem; // .5rem is just the padding of the toggler
}
我在:before
上使用了:after
而不是.dropdown-toggle
,因为已经在:after
上设置了另一个三角形/插入符号。如果需要,可以用原始文件覆盖原始文件,或者更好的是,仅在打开下拉菜单时显示原始文件。
居中的棘手部分是计算left
偏移量。
由于您使用10px
边界宽度构造了三角形,并且希望三角形的中心点为宽度的50%,所以左偏移量仅为50% - 10px
:>