Wie Chevrons zum Ausrichten auf die Mitte der Link Registerkarte

Question

Ich benutze Bootstrap und haben eine Navbar mit mehreren Links. Die ersten paar Links haben Dropdown-Menüs. Oben in jedem Dropdown-Menü habe ich ein Dreieck hinzugefügt, das nach oben zeigt und auf den Link zeigt, den Sie gerade angeklickt haben. Das Problem ist, dass die Links unterschiedlich lang sind (BRANDS vs MEN'S WATCHES) und ich möchte, dass das Dreieck mit dem Text zentriert ist. Da das Dreieck mit CSS über das :before Attribut auf der dropdown-menu gemacht wird, weiß ich nicht, wie man es gemäß der li mit der dropdown Klasse zentriert.

Bootply meiner navbar: http://www.bootply.com/ebKpdebUKh

CSS für das Dreieck:

#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

Zentrieren der "Chevron" wurde durch die Verwendung von JQuery geschehen.

prüfen vollständiges Beispiel bei CODEPEN

HTML:

<li class="dropdown"> 
     <a href="/brands.html" id="header-brands">BRANDS</a> 
     <ul class="dropdown-menu multi-column columns-6" role="menu"> 
      ---- Multi column section ---- 
     </ul> 
    </li> 

JS:

$('.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'); 
}); 

CSS:

#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; 
} 

Ich hoffe, das Sie :)

Answer 2

Genießen Sie hilft Ich weiß, dass dies eine akzeptierte Antwort hat - aber Sie brauchen nicht jquery für sie - nur CSS und Sie können ein Dreieck unter er Mitte der Link-Text erhalten . Ich habe ein zwielichtiges kleines navmenu erstellt - und habe einen aktiven Link, der ein kleines Dreieck unter dem aktiven (ausgewählten) Menülink zeigt - und dann den Mauszeiger über jedem der Links - das Dreieck wird unter dem Linktext angezeigt - und zentriert auf den li. Alles ohne jQuery - und ein bisschen CSS-Magie. Ich fügte auch einen längeren Link als üblich hinzu, um zu zeigen, dass der css tringle automatisch auf dem li zentriert ist.

.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 { 
 
\t \t content: ''; 
 
\t \t position: relative; 
 
\t \t border-style: solid; 
 
\t \t border-width:0 9px 9px; 
 
\t \t border-color: #006400 transparent; 
 
\t \t display: block; 
 
\t \t width: 0; 
 
\t \t z-index: 1; 
 
\t \t margin-left: -8px; 
 
\t \t top:5px; 
 
\t \t left: 50%; 
 
\t \t background: none; 
 
\t }

<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>