Benutzer:Ted/CSS/Anwendung und Praxis/Akkordeon

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hier wird versucht verschiedene Mechanismen zum "Aufklappen" von Inhalten zu erklären.

Aufklappen durch Überfahren mit der Maus[Bearbeiten]

Eine einfache Anwendung der :hover-Pseudoklasse als Selektor erlaubt es, Inhalte nur dann anzuzeigen wenn die Maus sich über einem "auslösenden Element" befindet.

Im Beispiel unten wird das <div>-Element im Normalfall gerade so groß gemacht dass der Header-Text noch angezeigt wird, im :hover-Fall aber groß genug.

(ToDo: Wie macht man das damit es auch bei einem geänderten Style für den H3-Header immer funktioniert?)

Wenn, wie hier, durch das Aufklappen von Elementen andere Elemente verschoben werden wird schnell klar wie der Begriff "Akkordeon" für dieses Feature entstand.

Beispiel
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Einfache Akkordeon Demo</title>
<style>
.akkordeon {
  max-height: 3em;
  overflow: hidden;
}

.akkordeon:hover {
  max-height: 1000em;
}
</style>
</head>
<body>
<div class="akkordeon">
<h3>Immer sichtbarer Teil 1</h3>
<p>Dieser Teil des Textes ist normalerweise unsichtbar, wird aber angezeigt wenn die Maus über den Auslöser bewegt wird.</p>
</div>

<div class="akkordeon">
<h3>Immer sichtbarer Teil 2</h3>
<p>Dieser Teil des Textes ist normalerweise unsichtbar, wird aber angezeigt wenn die Maus über den Auslöser bewegt wird.</p>
</div>

<div class="akkordeon">
<h3>Immer sichtbarer Teil 3</h3>
<p>Dieser Teil des Textes ist normalerweise unsichtbar, wird aber angezeigt wenn die Maus über den Auslöser bewegt wird.</p>
</div>

</body>
</html>
Sehr spartanisches Beispiel für ein Akkordeon um die zugrundeliegende Technik zu veranschaulichen. Schönere Beispiele findet man unter den Weblinks.
Beachten Sie: Auf Mobilgeräten ist wegen der fehlenden Maus die Verwendung der Pseudoklasse :hover problematisch und kann dazu führen dass eine Anwendung unbedienbar wird!

Mehrstufiges Menü mit Klick[Bearbeiten]

Ein aufklappbares Menü mit mehreren Ebenen kann dadurch realisiert werden dass eine verschachtelte HTML-Liste so ge-styled wird dass tieferliegende Ebenen nur dann angezeigt werden wenn sie im Status "aufgeklappt" sind.

Zum Speichern des "Klapp-Status" wird dabei ein (in der Regel verstecktes) Checkbox-Element verwendet. Der Menütitel wird dabei als Label für die Status-Checkbox definiert, so dass ein Klick auf den Menütitel den Klapp-Status umsetzt (siehe auch "Der_Checkbox-Hack").

Im Beispiel wird das Aufklappen durch folgenden Selektor erreicht: .nav__list input[type=checkbox]:checked + label + ul

"Eine unnummerierte Liste als Kind einer nav__list-Klasse, die direkter Nachbar eines Labels ist, das wiederum direkter Nachbar eines aktivierten Input-Elements vom Typ Checkbox ist."

Beispiel ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Einfache Akkordeon Demo</title>
<style>
/* No listitem markers */
ol, ul { list-style: none }

/* To hide the checkbox */
input.hidden {
  display:none;
}

/* Set the cursor for the menu items to pointer ("link") */
.menu label {
  cursor: pointer;
}

/* Hide menu content */
.group-list, .sub-group-list, .sub-sub-group-list {
  max-height: 0;
  overflow: hidden;
}

/* reset the height when checkbox is checked */
.nav__list input[type=checkbox]:checked + label + ul {
  max-height: 1000px;
}

</style>
</title>
<body>
  <div class="menu">
    <ul class="nav__list">
      <li>
        <input id="group-1" type="checkbox" class="hidden" />
        <label for="group-1">Menüpunkt 1 erste Ebene</label>
        <ul class="group-list">
          <li><a href="#">Ziel-Link 1 in zweiter Ebene</a></li>
          <li>
            <input id="sub-group-1" type="checkbox" class="hidden" />
            <label for="sub-group-1">Untermenü 1 in zweiter Ebene</label>
            <ul class="sub-group-list">
              <li><a href="#">Ziel-Link 1 in dritter Ebene</a></li>
              <li><a href="#">Ziel-Link 2 in dritter Ebene</a></li>
              <li><a href="#">Ziel-Link 3 in dritter Ebene</a></li>
              <li>
                <input id="sub-sub-group-1" type="checkbox" class="hidden" />
                <label for="sub-sub-group-1">Untermenü in dritter Ebene</label>
                <ul class="sub-sub-group-list">
                  <li><a href="#">Ziel-Link 1 in vierter Ebene</a></li>
                  <li><a href="#">Ziel-Link 2 in vierter Ebene</a></li>
                  <li><a href="#">Ziel-Link 3 in vierter Ebene</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
      <input id="group-2" type="checkbox" class="hidden" />
      <label for="group-2">Menüpunkt 2 erste Ebene</label>
      <ul class="group-list">
        <li>
        <li><a href="#">Ziel-Link 1 in zweiter Ebene</a></li>
        <li><a href="#">Ziel-Link 2 in zweiter Ebene</a></li>
        <input id="sub-group-2" type="checkbox" class="hidden" />
        <label for="sub-group-2">Untermenü in zweiter Ebene</label>
        <ul class="sub-group-list">
          <li><a href="#">Ziel-Link 1 in dritter Ebene</a></li>
          <li><a href="#">Ziel-Link 2 in dritter Ebene</a></li>
          <li>
            <input id="sub-sub-group-2" type="checkbox" class="hidden" />
            <label for="sub-sub-group-2">Untermenü in dritter Ebene</label>
            <ul class="sub-sub-group-list">
              <li><a href="#">Ziel-Link 1 in vierter Ebene</a></li>
            </ul>
          </li>
        </ul>
        </li>
      </ul>
      </li>
    </ul>
  </div>
</body>
</html>
Ein sehr spartanisches Beispiel für ein hierarchisches Menü zum aufklappen, mit (fast) nur dem Minimum an Styles die zur Funktion nötig sind. Auch hier kann man viel schönere Beispiele über die Weblinks finden.

Ein initial bereits teilweise aufgeklapptes Menü kann durch Verwenden des checked Parameters der entsprechenden unsichtbaren Checkbox erreicht werden.

Weblinks[Bearbeiten]