Brotkrumennavigation mit CSS Dreiecken

Wussten Sie, dass Sie Dreiecke mit reinem CSS erstellen können? Das ist ziemlich einfach. Sie erstellen einfach ein Block-Level-Element mit null Breite und Höhe, einem farbigen Rand auf einer Seite und transparenten Rändern auf den beiden angrenzenden Seiten. Sie sind für viele Dinge nützlich, z. B. kleine Pfeile, die aus Sprechblasen herausragen, Navigationszeiger und mehr. Oft sind dies nur visuelle Verzierungen, die keine eigene Auszeichnung verdienen. Glücklicherweise eignen sich Pseudoelemente oft perfekt dafür. Das bedeutet, dass Sie ::before, ::after oder beides verwenden, um diese Block-Level-Elemente zu erstellen und das Dreieck zu platzieren. Eine nette Anwendung, die mir in diesem Zusammenhang in den Sinn kam: die Brotkrumennavigation.

Das HTML-Markup

Halten wir die Dinge so sauber wie möglich und entscheiden uns für eine einfache ungeordnete Liste mit der Klasse "breadcrumb"

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Vans</a></li>
  <li><a href="#">Camper Vans</a></li>
  <li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>

Das CSS

Zuerst stellen wir sicher, dass unsere Liste nicht wie eine typische Liste aussieht. Wir entfernen die Standard-Listenstile, setzen die Elemente nach links und definieren sehr einfache Stile für jeden Link. Beachten Sie den versteckten Überlauf am Listencontainer selbst. Dieser wird aus zwei Gründen nützlich sein. Erstens stellt er sicher, dass das Menü eine Höhe hat. Container, die nur gefloatete Elemente enthalten, kollabieren, was oft nicht ideal ist. Zweitens, wenn wir unsere Dreiecke erstellen, werden wir sie groß machen.

.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: 18px Sans-Serif;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 65px;
  background: brown; /* fallback color */
  background: hsla(34,85%,35%,1); 
  position: relative; 
  display: block;
  float: left;
}

Um das Dreieck zu erstellen, verwenden wir den Selektor ::after, um ein Pseudoelement zu erstellen. Es wird ein Block-Element sein, mit null Höhe und Breite und absolut 100% nach links positioniert, was bedeutet, dass es am rechten Rand seines Elternelements beginnt. Wir positionieren es 50% von oben und ziehen es mit einem negativen Margin von -50px zurück, was sicherstellt, dass es exakt zentriert ist. Dies ist ein klassischer Trick. Noch ein paar weitere Dinge zu beachten. Die von uns verwendeten Ränder sind 50px oben, 50px unten und auf der linken Seite (wodurch ein nach rechts gerichteter Pfeil entsteht) nur 30px. Das bedeutet einen flacheren Pfeil. Wenn wir höher als 50px gehen würden, wäre er spitzer. Gleich 50px würde ihn zu einem perfekten 90-Grad-Winkel machen. Da die oberen und unteren Ränder jeweils 50px betragen, ergibt sich eine Pfeilhöhe von 100px. 100px ist weitaus höher als unser Menü wahrscheinlich sein wird, mit seiner 18px Schriftgröße und 10px obere und untere Polsterung. Das ist gut. Es bedeutet, dass wir genügend Spielraum haben, um die Schriftgröße anzupassen, ohne befürchten zu müssen, dass das Dreieck seine Grenzen erreicht.

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(34,85%,35%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

Beachten Sie die kleine 1-Pixel-Trennlinie? Das ist ein weiterer kleiner Trick. Wir können dem Dreieck keinen direkten Rand hinzufügen, da es bereits aus einem Rand besteht! Stattdessen erstellen wir ein weiteres Dreieck, das wir hinter unser ursprüngliches Dreieck legen und weiß färben. Dieses verwendet den ::before-Selektor, ist aber ansonsten genau gleich. Beachten Sie, dass hier der z-index wichtig ist. Sie könnten vertauschen, welches Dreieck ::after und welches ::before verwendet, das spielt wirklich keine Rolle.

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}

Nun zur Farbgebung. Da wir hier einen etwas progressiveren Ansatz verfolgen, gibt es zwei CSS-Elemente, die meiner Meinung nach perfekt zu dieser Idee passen: nth-child und HSLa.

• Das Coole an nth-child: Wir können die verschiedenen Ebenen der Brotkrümel mit keiner zusätzlichen Auszeichnung einfärben
• Das Coole an HSLa: Wir können die verschiedenen Ebenen der Brotkrümel basierend auf einem einzigen Farbton mit unterschiedlichen Schattierungen sehr einfach einfärben

Zusätzlich zur Farbgebung reduzieren wir den linken Innenabstand des ersten Links (weniger nötig, da kein Dreieck im Weg ist) und der letzte Link erhält keine Farbgebung und reagiert nicht auf Klicks oder zeigt einen Zeigercursor an. Dies können wir ebenfalls ohne zusätzliche Auszeichnung über :first-child und :last-child erreichen.

.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}
.breadcrumb li:last-child a::after { 
  border: 0; 
}

Und schließlich die Hover-Zustände. Der einzige Trick hierbei ist, dass wir sowohl das Dreieck als auch den Link einfärben müssen. Keine große Sache.

.breadcrumb li a:hover { 
  background: hsla(34, 85%, 25%, 1); 
}
.breadcrumb li a:hover:after { 
  border-left-color: hsla(34, 85%, 25%, 1) !important; 
}

Tiefere Browserkompatibilität

Nennen Sie mich faul, aber ich habe mich nicht um tiefere Browserkompatibilität gekümmert. Ich war mehr vom Gedanken begeistert, als über die Produktion nachzudenken. Wenn Sie diese Idee nutzen möchten, aber Bedenken wegen älterer Browser haben, sind hier einige Dinge, über die Sie nachdenken können:

• Verwenden Sie für die Farbgebung kein hsla(), sondern Hex-Codes
• Verwenden Sie für die Farbgebung kein :nth-child, sondern geben Sie jedem Listenelement einen Klassennamen
• Für Browser, die ::after/::before nicht unterstützen, verwenden Sie ein bildbasiertes System. Dies ist mein Lieblings-Tutorial für bildbasierte Brotkrümel.
• Verwenden Sie Modernizr zur Erkennung von Funktionen (wie HSLa)
• Verwenden Sie bedingte Stylesheets für IE

Viel Spaß

Hier ist das von uns behandelte Beispiel und ein paar Variationen

Sehen Sie den Stift CSS Triangle Breadcrumbs von CSS-Tricks (@css-tricks) auf CodePen.