Interaktive Elemente: Details und Summary

Die <details> und <summary> Tags sind HTML5-Elemente, die es ermöglichen, Inhalte zusammenzufassen und auszublenden, wodurch Benutzer die Möglichkeit haben, bestimmte Teile einer Webseite zu verbergen oder anzuzeigen. Dies ist besonders nützlich, um längere Texte oder zusätzliche Informationen in einer kompakten Form darzustellen und dem Benutzer die Kontrolle über die Anzeige zu geben.

Die Syntax für die Verwendung von <details> und <summary> ist einfach:

<details>
<summary>Zusammenfassung</summary>

<p>Versteckter Text, der bei Bedarf angezeigt werden kann.</p>
</details>

Der <details> Tag umschließt den Inhalt, der versteckt oder angezeigt werden soll. Der <summary> Tag wird innerhalb des <details> Tags platziert und fungiert als Titel oder Zusammenfassung für den versteckten Inhalt. Der versteckte Inhalt wird standardmäßig ausgeblendet und erscheint nur, wenn der Benutzer auf die Zusammenfassung klickt. Wenn der versteckte Inhalt sichtbar ist, wird er direkt unterhalb der Zusammenfassung angezeigt. Der Benutzer kann den versteckten Inhalt ein- und ausblenden, indem er auf die Zusammenfassung klickt.

Browserkompatibilität:
<details> und <summary> werden von den meisten modernen Webbrowsern unterstützt, aber ältere Browser könnten Probleme haben. Wer möchte, kann eine alternative Darstellung oder Funktion für Browser bereitzustellen, die diese Tags nicht unterstützen. Anleitungen finden sich im Internet.

Zusammenfassung:
<details> und <summary> bieten eine praktische Möglichkeit, um Inhalte zu strukturieren und dem Benutzer die Möglichkeit zu geben, bestimmte Teile einer Webseite bei Bedarf anzuzeigen oder auszublenden. Sie sind einfach zu verwenden und können das Benutzererlebnis verbessern, indem sie die Darstellung von Informationen flexibler gestalten.

Um den summary-Punkt bei details zu gestalten, können Sie CSS verwenden, um das Aussehen des Zusammenfassungstitels anzupassen. Hier ist ein Beispiel, wie Sie den summary-Punkt anpassen können:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Menu mit gestaltetem summary</title>
<style>
/* Styles für das Menü */
details {
margin-bottom: 15px;
}
summary {
cursor: pointer;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: background-color 0.3s ease;
}
summary:hover {
background-color: #e0e0e0;
}
summary:focus {
outline: none;
}
ul {
margin-top: 0;
padding-left: 20px;
list-style: none;
}
</style>
</head>
<body>


<details>
<summary>Menüpunkt 1</summary>
<ul>
<li><a href="#">Unterpunkt 1.1</a></li>
<li><a href="#">Unterpunkt 1.2</a></li>
<li><a href="#">Unterpunkt 1.3</a></li>
</ul>
</details>


<details>
<summary>Menüpunkt 2</summary>
<ul>
<li><a href="#">Unterpunkt 2.1</a></li>
<li><a href="#">Unterpunkt 2.2</a></li>
<li><a href="#">Unterpunkt 2.3</a></li>
</ul>
</details>


<details>
<summary>Menüpunkt 3</summary>
<ul>
<li><a href="#">Unterpunkt 3.1</a></li>
<li><a href="#">Unterpunkt 3.2</a></li>
<li><a href="#">Unterpunkt 3.3</a></li>
</ul>
</details>

</body>
</html>

In diesem Beispiel habe ich dem summary-Punkt einige CSS-Stile hinzugefügt, um ihn anzupassen:

background-color: Hintergrundfarbe des Zusammenfassungstitels.
padding: Innenabstand des Zusammenfassungstitels.
border: Rand um den Zusammenfassungstitel.
border-radius: Abrundung des Randes, um ihn abzurunden.
transition: Übergangseffekt für einen sanften Farbwechsel beim Überfahren des Zusammenfassungstitels.
:hover: Stiländerungen, die auftreten sollen, wenn der Mauszeiger über den Zusammenfassungstitel bewegt wird.
:focus: Stiländerungen, die auftreten sollen, wenn der Zusammenfassungstitel den Fokus erhält. In diesem Fall entfernen wir die Standardumrandung.

Das Erscheinungsbild des Pfeils kann je nach Browser unterschiedlich sein und ist normalerweise schwer direkt anzupassen. Sie können jedoch versuchen, den Pfeil zu verbergen und Ihr eigenes benutzerdefiniertes Symbol oder Styling zu erstellen. Hier ist ein Beispiel, wie Sie den Pfeil ausblenden können:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Menu mit gestaltetem summary und verstecktem Pfeil</title>
<style>
/* Styles für das Menü */
details {
margin-bottom: 15px;
}
summary {
cursor: pointer;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: background-color 0.3s ease;
/* Verstecke den Pfeil */
list-style-type: none;
}
summary::before {
content: "+"; /* Benutzerdefiniertes Symbol (kann geändert werden) */
margin-right: 5px; /* Abstand zwischen dem benutzerdefinierten Symbol und dem Text */
}
summary:hover {
background-color: #e0e0e0;
}
summary:focus {
outline: none;
}
ul {
margin-top: 0;
padding-left: 20px;
list-style: none;
}
</style>
</head>
<body>


<details>
<summary>Menüpunkt 1</summary>
<ul>
<li><a href="#">Unterpunkt 1.1</a></li>
<li><a href="#">Unterpunkt 1.2</a></li>
<li><a href="#">Unterpunkt 1.3</a></li>
</ul>
</details>


<details>
<summary>Menüpunkt 2</summary>
<ul>
<li><a href="#">Unterpunkt 2.1</a></li>
<li><a href="#">Unterpunkt 2.2</a></li>
<li><a href="#">Unterpunkt 2.3</a></li>
</ul>
</details>


<details>
<summary>Menüpunkt 3</summary>
<ul>
<li><a href="#">Unterpunkt 3.1</a></li>
<li><a href="#">Unterpunkt 3.2</a></li>
<li><a href="#">Unterpunkt 3.3</a></li>
</ul>
</details>

</body>
</html>

In diesem Beispiel habe ich den Pfeil versteckt, indem ich list-style-type: none; auf das summary-Tag angewendet habe. Anschließend habe ich ein benutzerdefiniertes Symbol vor dem Text des summary-Tags hinzugefügt, das in diesem Fall ein Pluszeichen ist (+). Sie können das benutzerdefinierte Symbol nach Ihren Wünschen anpassen.