HTML&CSS – Tutorial: Menüpunkt mit Dreieck

    Ausgangssituation

    In diesem Tutorial möchte ich euch zeigen, wie man in einem Menü einen Menüpunkt beim hovern durch ein kleines Dreieck hervorheben kann. Und das ganz ohne images, sondern nur mit reinem HTML&CSS. Im Anhang findet ihr den Code zum Download.


    Schritt 1: Aufbau eines Menüpunktes

    Ein Listenpunkt beinhaltet sowohl den Link als auch einen leeren span oder div (in diesem Fall ist es egal, was von beidem man verwendet). Unsere Liste ist also folgendermaßen aufgebaut:


    Schritt 2: Basisstyles

    Zunächst einmal geben wir dem Menü & seinen Punkten die Basis-styles.

    Dadurch erhalten wir folgendes Resultat:


    Schritt 3: Erstellen des Dreieckes

    Danach versuchen wir das Dreieck zu formen. Hierzu habe ich den Artikel CSS: Geometrische Figuren mit reinem CSS gestalten von Denis Potschien zur Hilfe gezogen. Dort wird beschrieben, wie man ein Dreieck mit Hilfe von border erstellt. Wir fügen nun also unserem span.triangle folgende CSS-Anweisungen hinzu:

    Die Farbe des farbigen border hat die gleiche Farbe wie der Hintergrund unseres bodys. Wir bekommen nun dieses Resultat:

    Um das ganze nachvollziehen zu können, habe ich die Rahmen auf jeder Seite in einer anderen Farbe eingefärbt. Da der span aus 0px Höhe & Breite besteht ist nur der Rahmen sichtbar, welcher aus der Mitte des 0px großen span beginnt.

    Wenn man nun die ungewünschten Seiten „transparent“ macht, bleibt am Ende nur das gewünschte Dreieck sichtbar. (Den gegenüberliegenden border muss man letztendlich nicht angeben, da dieser ja nichts vom gewünschten Dreieck „abschneiden“ muss)


    Schritt 4: Das Dreieck positionieren

    Um nun dem Dreieck einen Anhaltspunkt zu geben, an dem es sich ausrichten soll, geben wir dem Menüpunkt position: relative; und dem Dreieck ein position: absolute; sodass es sich am Menüpunkt ausrichtet. Nun müssen wir es noch so hinschieben, dass es an der gewünschten Position sitzt. Das erreichen wir, indem wir unserem span.triangle die Werte top: 12px; und right: 0px; hinzufügen. Wir erhalten nun folgendes Ergebnis (es ist jetzt nur noch die Spitze des Dreiecks sichtbar):


    Schritt 5: Dreieck erst bei :hover anzeigen

    Zunächst einmal blenden wir das Dreieck aus, indem wir dem div ein display: none geben. Die hover-Funktion definieren wir wie folgt: .menu-item:hover .triangle {display: block}. Somit erscheint das Dreieck, sobald man mit der Maus drüber fährt. Diese Eigenschaft könnte man nun auch einem aktiven Menüpunkt geben.


    Resultat

    Und hier sind die Ergebnisse, wie sie von verschiedenen Browsern ausgegeben werden:

    Verwandte Blogbeiträge

    Diese Themen beschäftigten uns und unsere Kunden kürzlich

    Bereit für Projekte ohne Grenzen?

    Wir freuen uns auf Ihre Projekt-Ideen! Lernen Sie uns gerne in einer kostenlosen Erstberatung kennen und nehmen Sie noch heute Kontakt zu uns auf.PROJEKT ANFRAGE STELLEN

    Wie sieht Ihre perfekte Digitalagentur aus?

    Wir haben aus über 500 Anfragen die häufigsten Kriterien zur Agenturauswahl zusammengetragen. So können Sie Ihre Anbieter einfach vergleichen.CHECKLISTEN HERUNTERLADEN
    Darmstadt

    Bright Solutions GmbH
    Pfnorstraße 10-14
    64293 Darmstadt

    Adresse anzeigen
    Hamburg

    Bright Solutions Hamburg GmbH
    Altonaer Poststraße 9a
    22767 Hamburg

    Adresse anzeigen
    Telefon

    Darmstadt: +49 6151 / 27 647 - 0

    Hamburg: +49 040 / 350 80 130

    Nummern anzeigen