Question

我正在使用Bootstrap，并且有一个带有多个链接的导航栏。前几个链接有下拉菜单。在每个下拉菜单的顶部，我添加了一个向上指向您刚刚单击的链接的三角形。问题是，链接的长度不同（BRANDS vs MEN'S WATCHES），我希望三角形以文本为中心。由于三角形是通过:before上的dropdown-menu属性使用CSS完成的，因此我不知道如何根据带有li类的dropdown将其居中。< / p>

导航栏的Bootply：http://www.bootply.com/ebKpdebUKh

三角形的CSS：

#main_navbar2 .dropdown-menu:before { position: absolute;
  top: -10px;
  left: 55px;
  display: inline-block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #000;
  border-left: 9px solid transparent;
  content: '';}

Answer 1

使用JQuery完成了“chevron”的居中。

点击 CODEPEN

上的完整示例

HTML：

$('.dropdown-menu , .dropdown > a').hover(function() {
  $(this).parent().find('a:first-child').addClass('menu-pointer')
}, function() {
  $(this).parent().find('a:first-child').removeClass('menu-pointer');
});

JS：

#main_navbar2 .dropdown > a.menu-pointer:after {
  top: 34px;
  margin: auto;
  position: absolute;
  display: block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #000;
  border-left: 9px solid transparent;
  content: '';
  left: 0;
  right: 0;
  z-index: 999;
  width: 9px;
}

CSS：

.fb-event-anchor

我希望这有助于你

享受：）

Answer 2

我知道这有一个公认的答案 - 但你不需要jquery - 只有CSS，你可以在链接文本的中心下面得到一个三角形。我创建了一个狡猾的小navmenu - 并且有一个活动链接，在活动（选定）菜单链接下显示一个小三角形 - 然后将鼠标悬停在每个链接上 - 三角形将显示在链接文本下 - 并且居中于李。所有没有jQuery - 还有一点css魔术。我还提供了一个比平时更长的链接文本，以显示css tringle以li为中心。

.navLinks li{display:inline-block;list-style:none; text-decoration: none;padding:0 10px}
.navLinks li a, .navLinks li a:hover{text-decoration: none}

.navLinks li:hover:after,
.activeLink:after {
		content: '';
		position: relative;
		border-style: solid;
		border-width:0 9px 9px;
		border-color: #006400 transparent;
		display: block;
		width: 0;
		z-index: 1;
		margin-left: -8px;
		top:5px;
		left: 50%;
		background: none;
	}

<ul class="navLinks">
   <li class="activeLink"><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">An Example of a long link text.</a></li>
</ul>

如何让雪佛龙与链接选项卡的中心对齐

2 个答案: