Wie bekommt man ein Dreieck hover-Effekt auf eine Reine css navbar?

Ich würde gerne ein kleines Dreieck unter dem text, dass die Punkte, wenn der Benutzer mit der Maus über die verschiedenen Registerkarten. Hier ist ein Stück code, mit dem ich arbeite.

css navbar

Welchen Teil haben Sie ein problem mit?
Hier ist, wie man eine CSS-Dreieck: stackoverflow.com/questions/7073484/... - Du könntest es in deinem tab-div und spielen, um mit der Farbe des Dreiecks (die gleiche wie der hintergrund = unsichtbar, ändern Sie die Farbe auf hover, etc.)
Ich denke, das ist der Teil im Probleme mit, immer wenn ich ein Dreieck hinzuzufügen ist Schraube alles um. Etwa so: jsfiddle.net/88Uxw/2

InformationsquelleAutor Bramble | 2012-01-12

  1. 11

    Ich denke, das ist wahrscheinlich das, was du suchst:

    Fiddle

    Auch, bitte verwenden Sie semantisches markup:

    1. Wenn Ihr mit HTML5 wickeln Sie Ihre navigation in <nav> tags.
    2. Ihre links (wenn Sie wirklich gehen, um von links) sein sollte <a> Elemente.
    3. Für eine Liste von links wie du haben es wird empfohlen, um eine Liste (<ul> & <li>).

    InformationsquelleAutor Web_Designer

  2. 2

    Hier ist eine änderung zu Ihren jsfiddle:

    Ich habe ein <span class="arrow"></span> enthalten die Dreiecke in der HTML:

    <div class="tab_container">
    <div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
    <div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
    <div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
    <div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
    <div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>

    Hier sind die änderungen an Ihrem Menü, das reduzieren der Größe des Dreiecks und positionieren Sie diese in der unteren Mitte jeder Menüpunkt, wenn Sie mit der Maus auf:
    CSS:

    /*
.accordion_headings:hover{
    background:#00CCFF;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;
}
*/
.accordion_headings{
    position:relative;
}
.accordion_headings .arrow{
    display:none;
}
.accordion_headings:hover .arrow{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;

    display:block;
    position:absolute;
    bottom:0;
    left:49%;
}

    InformationsquelleAutor Micah

  3. 0

    Hier ist ein fiddle , verwendet ein hintergrund-Bild Anzeige über das schwebte Menüpunkt. Ist es nicht schön aber weitere css sollte helfen.

    UPDATE

    Sorry habe ich wohl falsch gelesen. Hier ist eine funktionierende fiddle mit einem kleineren Pfeil in die richtige Richtung.

    Vielleicht vermisse ich es, aber ich sehe nichts in Chrom.
    "Ich hätte gerne ein kleines Dreieck unter dem text, dass die Punkte, wenn der Benutzer mit der Maus über die verschiedenen Reiter." Wie funktioniert Ihre Lösung beantworten?
    Mein Verständnis von einem "reinen css navbar" bedeutet, um Bilder ausschließen.
    Ich dachte, es war nur nicht mit jedem-scripting. Ich würde Zustimmen, ist dies nicht passt, der Anforderung.

    InformationsquelleAutor kwelch

Schreibe einen Kommentar