Aufklappbares Fenster

[Gabriele]

Hallo!

ich möchte in der Fußzeile einen Link anbringen.

Wenn man auf diesen klickt, soll ein kleines Fenster (über der aktuellen Seite) aufgehen mit der Überschrift "Weitergehende Infos" und darunter 2 Links.

Wie kann ich so etwas realisieren?

Mit bestem Dank für Eure Hilfe

Gaby

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML!

ich möchte in der Fußzeile einen Link anbringen.

Wenn man auf diesen klickt, soll ein kleines Fenster (über der aktuellen Seite) aufgehen mit der Überschrift "Weitergehende Infos" und darunter 2 Links.

Wie kann ich so etwas realisieren?

ganz ohne JavaScript mit dem dialog-Element:

• Infobox/modale Dialogfenster

Eigentlich würde ich weiterführende Infos aber gleich auf der Seite sehen wollen,
ohne etwas anklicken zu müssen.

Herzliche Grüße
Matthias Scharwies

[Gabriele]

Hallo Matthias

ganz ohne JavaScript mit dem dialog-Element:

• Infobox/modale Dialogfenster

Das einfachste Beispiel was ich dort gefunden hatte, war das hier

Leider ist das Fester schon geöffnet. Wie kann ich dies erst durch einen Klick auf einen Link oder ähnliches erreichen?

[JürgenB]

Hallo,

Leider ist das Fester schon geöffnet. Wie kann ich dies erst durch einen Klick auf einen Link oder ähnliches erreichen?

indem Du den Text hinter „Beachten“ liest und dann noch einen Blick in den Quelltext wirfst.

Gruß
Jürgen

[Gabriele]

Besten Dank an Euch beide.

Jetzt habe ich aber feststellen müssen, dass das Beispiel gerade im Firefox nicht funktioniert.

Schade!

[JürgenB]

https://wiki.selfhtml.org/wiki/Infobox/modale_Dialogfenster#.C3.96ffnen_mit_showModal.28.29

[Gabriele]

https://wiki.selfhtml.org/wiki/Infobox/modale_Dialogfenster#.C3.96ffnen_mit_showModal.28.29

Hallo Jürgen, Javascript möchte ich nicht verwenden.

Gruß Gaby

[Matthias Scharwies]

Servus!

https://wiki.selfhtml.org/wiki/Infobox/modale_Dialogfenster#.C3.96ffnen_mit_showModal.28.29

Hallo Jürgen, Javascript möchte ich nicht verwenden.

Bei dialog muss man noch ein paar Monate warten.

Als Alternative gibt es dann das schon erwähnte details-Element:

Offenlegungswidget mit details

Für weiterführende Links würde ich persönlich Fließtext verwenden, ein details-Element kann bei vielen Links (z.B. eine FAQ) für Übersicht sorgen.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

Bei dialog muss man noch ein paar Monate warten.

Du schreibst im Wiki, dass das command-Attribut in allen Browsern außer Firefox gänge. Aber im Safari geht's laut caniuse/MDN nur im TecPreview. In den Versionen 26.0 (Sept. 25) und 26.1 (v.next) ist es rot.

Im Firefox 144 ist es grün und laut Roadmap sollte die Version im Oktober kommen, ja.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Bei dialog muss man noch ein paar Monate warten.

Du schreibst im Wiki, dass das command-Attribut in allen Browsern außer Firefox gänge. Aber im Safari geht's laut caniuse/MDN nur im TecPreview. In den Versionen 26.0 (Sept. 25) und 26.1 (v.next) ist es rot.

Im Firefox 144 ist es grün und laut Roadmap sollte die Version im Oktober kommen, ja.

Ja, aus einer PN an @JürgenB :

ich hatte im Forum gestern nicht mehr geantwortet, weil ich erst mein Handy auf iOS26 geupdatet hatte (6GB Daten, 30min Dauer). Leider funktionieren die Frickl-Beispiele mit command und light dismiss dort noch nicht. 😟

Ich warte den 14. Oktober ab, überprüfe dann, was im FF144 geht und passe Artikel und Beispiele entsprechend an.

Herzliche Grüße
Matthias Scharwies

[Gabriele]

Hallo Matthias,

ich habe jetzt ein Mini-Beispiel mit details erstellt. Bisher habe ich vergeblich versucht, nur den Text-Bereich des aufgeklappten Fensters mit anderem Hintergrund zu versehen.

Gruß

Gaby

[Rolf B]

Hallo Gabriele,

wenn Du uns nicht zeigst, was Du gemacht hast (z.B. als Onlinebeispiel), dann können wir Dir auch nicht sagen, was Du verbessern kannst.

Grundsätzlich solltest Du aber zum Stylen des details-Inhalts eine Struktur wie diese nutzen:

<details id="popup_footer">
   <summary>xyzxyzxyz</summary>
   <div>
      Inhalt des details-Bereichs
   </div>
</details>

Dann kannst Du per CSS das div im details-Bereich selektieren und färben

#popup_footer > div {
   background-color: deeppink;
}

Wenn Du nicht weißt, was #popup_footer > div bedeutet, schau Dir im Wiki das Thema CSS Selektoren an.

An Stelle eines Selektors mit Kombinator kannst Du natürlich auch dem div eine eigene ID geben - ich persönlich vergebe IDs aber eher sparsam und verwende lieber etwas komplexere Selektoren.

Rolf

[Matthias Scharwies]

Servus!

Hallo Gabriele,

wenn Du uns nicht zeigst, was Du gemacht hast (z.B. als Onlinebeispiel), dann können wir Dir auch nicht sagen, was Du verbessern kannst.

Grundsätzlich solltest Du aber zum Stylen des details-Inhalts eine Struktur wie diese nutzen:

<details id="popup_footer">
   <summary>xyzxyzxyz</summary>
   <div>
      Inhalt des details-Bereichs
   </div>
</details>

Dann kannst Du per CSS das div im details-Bereich selektieren und färben

#popup_footer > div {
   background-color: deeppink;
}

Wenn Du nicht weißt, was #popup_footer > div bedeutet, schau Dir im Wiki das Thema CSS Selektoren an.

An Stelle eines Selektors mit Kombinator kannst Du natürlich auch dem div eine eigene ID geben - ich persönlich vergebe IDs aber eher sparsam und verwende lieber etwas komplexere Selektoren.

Genau! Da gibt es seit Neuestem ::details-content.
Der geht schon im FF143 und in Safari ab 18.4.

Herzliche Grüße
Matthias Scharwies

[Gabriele]

Hallo Matthias,

Das "Fenster" hat sich auch in meinem Beispiel geöffnet, allerdings erhoffe ich, dass das Fenster (die Hintergrund-Farbe) nur so breit ist wie der Text im Fenster und nicht wie bei Dir

https://jsfiddle.net/2koagq16/

und mir über die gesamte Viewport-Breite.

[Rolf B]

Hallo Gabriele,

ob ein details-Element oder die popover-Technik für dich günstiger sind, hängt von deinen Designwünschen ab.

Details ist eher nachteilig, wenn man drüber nachdenkt, weil es sich nur durch einen weiteren Klick auf das summary-Element schließen lässt. Das erwartet man bei einem Popup nicht.

Popover ist da besser, weil es automatisch schließt. Die Positionierung relativ zum Footer braucht allerdings Ankerpositionierung und die ist im Firefox noch nicht angekommen. Abgesehen davon kriege ich sie zusammen mit popover spontan nicht hin, das mag sonst jemand rausfinden und erklären.

Grundsätzlich ist es so, dass deine Ablehnung von JavaScript das Problem nicht einfacher macht…

Zu deinen Unsicherheiten bei details:

Blockelemente (wie details oder div) sind von Natur aus so breit wie ihre Elternelemente^[1]. Wenn sie schmaler sein sollen, muss man was dafür tun. Aber weil ich von details eigentlich abraten möchte, gehe ich ausführlich darauf ein.

Nur soviel: Damit das details-Element seine Inhalts-Größe annimmt und sich nicht auf die verfügbare Breite aufbläht, kannst Du unter anderem

• für das details-Element display:inline-block setzen
• das details-Element in eine Flexbox integrieren. Flex-Items sind standardmäßig so breit wie ihr Inhalt.
• explizit für details die Eigenschaft width: fit-content; setzen

Rolf

---

1. Wobei, hm, "Blockelemente" sind sowas von HTML 4... also: die Elemente, die in Phrasing Content enthalten sein dürfen, sind Inline-Elemente und der Rest sind Blockelemente. So in etwa... ↩︎

[Gabriele]

Hallo

Grundsätzlich ist es so, dass deine Ablehnung von JavaScript das Problem nicht einfacher macht…

Da, wie ich gelesen habe, Javascript praktisch in allen Browsern vorinstalliert ist und vom normalen Anwender nicht so einfach ausgeschaltet werden kann, konnte ich meine Chefs überzeugen, dass nicht darauf verzichtet werden muss😜

Wofür ich mich entscheide, bleibt abzuwarten.

Vielen Dank an all Helfer!

Gaby

[Matthias Scharwies]

Guten Morgen,

Genau! Da gibt es seit Neuestem ::details-content.
Der geht schon im FF143 und in Safari ab 18.4.

Jetzt auch im Wiki:

Infobox/Akkordeon_mit_details#CSS-Selektoren_::open_und_::details-content

Bitte mal testen und evtl. verbessern!

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

<details>
::details-content is bullshit
</details>

details::details-content {
   padding: 2em;
   border: 2em solid hotpink;
   background-color: chartreuse;
}

Versus

<details>
  <div>
   div in details is better
  </div>
</details>

details div {
  background-color: chartreuse;
  padding: 2em;
  border: 2em solid hotpink;
}

Rolf

[Rolf B]

Hallo Matthias,

keine Ahnung ob dieses Verhalten Absicht ist - in MDN ist auch ein Beispiel für Padding in ::details-content und die verwenden ganz locker

details[open]::details-content {
...
}

Die Spec lässt sich dazu nicht aus, ich habe das mal als Issue hinterlassen.

Rolf

[Gabriele]

Hallo,

jetzt bin ich total unsicher, was ich machen soll.

See (read) you

Gaby

[Gunnar Bittersmann]

@@Gabriele

jetzt bin ich total unsicher, was ich machen soll.

Weil dich die Fragen aufgewühlt haben und du noch keine Antwort darauf hast? Im Zweifel: die Links gleich anzeigen.

🖖 Live long and prosper

[Gabriele]

@@Gunnar,

nein, verwirrt durch die unterschiedlichen Ansichten, demonstriert durch einzelne Code-Schnipsel und keine abgestimmten Gesamtvorschlag.

Gruß

Gaby

[Gunnar Bittersmann]

@@Gabriele

nein, verwirrt durch die unterschiedlichen Ansichten, demonstriert durch einzelne Code-Schnipsel und keine abgestimmten Gesamtvorschlag.

??

Links ohne aufklappbares Fenster anzeigen. Problem gelöst. Bitte, gerngeschehen.

🖖 Live long and prosper

[Rolf B]

Hallo Gabriele,

ein "abgestimmter Gesamtvorschlag" ist die Abschreibhilfe für deine ganze Seite. Deswegen sind wir mit sowas zögerlich. Abgesehen davon ist es immer so, dass es für ein Problem mehrere Lösungen geben kann.

Aber guck Dir mal das hier an:

https://jsfiddle.net/Rolf_b/por0ntz9/

Sicherlich nicht optimal, aber so könnte man es machen. Wie Du das für deine Seite übersetzt, musst Du schauen. Die diversen CSS-Eigenschaften findest Du im Wiki beschrieben.

Rolf

[Gabriele]

Hallo Rolf

danke für das Beispiel.

Die diversen CSS-Eigenschaften findest Du im Wiki beschrieben.

Autsch, sehr viel Unbekanntes. Da habe ich einige Zeit zu knabbern😉

Gruß

Gaby

[Gabriele]

Hallo Rolf,

Was mache ich, wenn in Deinem Beispiel

https://jsfiddle.net/Rolf_b/por0ntz9/

viele Links vorhanden sind?

Dies sieht in der schmalen Version

etwas komisch aus (langes Scrollen bis zum Inhalt).

Gaby

[Rolf B]

Hallo Gabriele,

wenn die Navigation umfangreich ist, musst du sie in der schmalen Version hinter einem Button verbergen. Verlangt derzeit Javascript.

Eine auf <details> basierende Navi haben wir mal probiert, es gibt auch Beispiele in Wiki, ich bin aber von der Bedienbarkeit nicht überzeugt.

Popover wäre dafür eine Alternative, aber das kannst du per CSS nicht ein/ausschalten.

Rolf

[JürgenB]

Hallo Rolf,

Popover wäre dafür eine Alternative, aber das kannst du per CSS nicht ein/ausschalten.

ich habe zur Navi mit popover und anchor-Technik mal einen Entwurf gemacht.

Diese Version funktioniert im Chrome und im FF mit dem Polyfill für achor-Positionierung.

Im Safari wird der Polyfill seit Version 26 nicht mehr benötigt. Leider öffnet sich im Safari aber die unterste Ebene (Bereich 2.x) nicht und ich habe keine Ahnung, woran das liegt.

Wenn man aber nur eine Ebene benötigt, kann es auch der Safari. Und das CSS kann deutlich schlanker werden.

Gruß
Jürgen

[Gabriele]

Hallo Rolf

wenn die Navigation umfangreich ist, musst du sie in der schmalen Version hinter einem Button verbergen. Verlangt derzeit Javascript.

Inzwischen ist geklärt, dass ich auch Javascript verwenden darf.

Gruß

Gaby

[Rolf B]

Hallo Gabriele,

und? KANNST du das auch? Oder brauchst Du dafür Unterstützung?

Rolf

[Gabriele]

Hallo Rolf,

und? KANNST du das auch? Oder brauchst Du dafür Unterstützung?

Wenig Erfahrung, wäre dankbar für Unterstützung.

Ich habe ein kleines Beispiel gefunden, zu dem ich schon zwei Fragen habe.

1. Der Button hat die Bezeichnung Blacklist. Wenn man darauf klickt ist der erste Eintrag ebenfalls Blacklist.
2. Statt dem Button sollte das Zeichen angezeigt werden.

Ich werde versuchen, mich rasch in das Beispiel einzuarbeiten.

Gaby

[Gunnar Bittersmann]

@@Gabriele

Ich habe ein kleines Beispiel gefunden, zu dem ich schon zwei Fragen habe.

1. Der Button hat die Bezeichnung Blacklist. Wenn man darauf klickt ist der erste Eintrag ebenfalls Blacklist.

Nö, das ist kein Button. Das ist eine Auswahlliste. Und was da angezeigt wird, ist die aktuelle Auswahl. Wenn du „Fringe“ auswählt und die Liste wieder schließt, dann wird „Fringe“ angezeigt.

2. Statt dem Button sollte das Zeichen angezeigt werden.

Aber nicht nur! Nicht alle Nutzer nehmen Webseiten visuell wahr; für die anderen muss eine Textalternative da sein.

Ein Hamburger-Button könnte so aussehen:

<button aria-expanded="false">
  <span aria-hidden="true">☰</span>
  <span class="visually-hidden">Menü</span>
</button>

aria-hidden="true" versteckt das ☰-Zeichen vor Screenreadern. Die Klasse visually-hidden sorgt mit den dazugehörigen Stilangaben aus How-to hide content dafür, das „Menü“ nicht sichtbar angezeigt wird, aber von Screenreadern vorgelesen wird.

Statt des ☰-Zeichens kannst du auch ein SVG verwenden.

Das aria-expanded-Attribut des Buttons gibt den Zustand des Menüs an. Wenn das Menü per JavaScript geöffnet wird, muss das Attribut auf "true" gesetzt werden. Beim Schließen dann wieder auf "false".

🖖 Live long and prosper

[Gabriele]

Danke Gunnar,

Nö, das ist kein Button. Das ist eine Auswahlliste. Und was da angezeigt wird, ist die aktuelle Auswahl. Wenn du „Fringe“ auswählt und die Liste wieder schließt, dann wird „Fringe“ angezeigt.

Dann habe ich natürlich das falsche Beispiel ausgewählt! Ich wollte ja die oben angesprochenen Methoden details, popover, u.a. ersetzen durch die Javascript-Lösung.

Da aria-expanded-Attribut des Buttons gibt den Zustand des Menüs an. Wenn das Menü per JavaScript geöffnet wird, muss das Attribut auf "true" gesetzt werden. Beim Schließen dann wieder auf "false".

Im Laufe meiner Beschäftigung mit Javascript werde ich auch lernen wie man mit Javascript Attribute verändert😉

Gruß

Gaby

[JürgenB]

Hallo Gaby,

Ich wollte ja die oben angesprochenen Methoden details, popover, u.a. ersetzen durch die Javascript-Lösung.

warum willst du das? Du willst doch, dass bei Klick auf einen Text (Button) weiterer Text bzw. Links angezeigt werden. Wenn das Anzeigen im Textfluss passieren soll, nimm Details/Summary, wenn es sich über die Seite legen soll, nimm popover. Für das Öffnen und Schließen brauchst du kein Javascript.

Gruß
Jürgen

[Gabriele]

Hallo Jürgen

Ich wollte ja die oben angesprochenen Methoden details, popover, u.a. ersetzen durch die Javascript-Lösung.

warum willst du das?

Weil Du Öffnen mit showModal() am 21.9. in diesem Thread vorgeschlagen hattest.

Gruß

Gaby

[Gaby]

Wie ich gerade gesehen habe, hat ja auch die Popover Methode eine Javascript-Komponente: <script src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest" crossorigin="anonymous"

Da muss sogar auf eine fremde Seite zugegriffen werden.

Falls die Methode infrage kommt, kann man dann nicht das aufgerufene Script auf den eigenen Server nehmen?

Gruß

Gaby

[JürgenB]

Hallo Gaby,

du musst dir als erstes überlegen, was du willst und welche Technik benötigt wird. Danach weißt du, ob du Javascript benötigst und ob noch weitere Scripte dazu kommen müssen.

• Dialog benötigt Javascript zum Öffnen. Hast du einen Dialog mit dem Benutzer?

• Details/Summary ist nur html. Legt die weiteren Inhalte hinter das, was im Summary steht.

• Popover benötigt nur html. Legt die weiteren Inhalte frei positioniert über den Rest der Seite, Default ist mittig zentriert. Man kann aber auch anders positionieren. Wenn das Popover-Fenster relativ zum Öffnen-Button positioniert werden soll, kommt die Anchor-Technik zum Einsatz. Und die benötigt Stand heute im Firefox einen Javascript-Polyfill. Den kannst du vom CDN holen oder auch selbst hosten.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

du musst dir als erstes überlegen, was du willst

Du hast eine Kleinigkeit vergessen! Zu überlegen, was die Nutzer wollen. Oder noch besser: keine Annahmen darüber zu machen, sondern Nutzer zu fragen.

Wollen Nutzer, um an weiterführende Links zu kommen, eine zusätzliche Interaktion? Oder sollten die zwei Links nicht gleich angezeigt werden (so viel Platz können sie ja nicht beanspruchen)? Also wozu das ganze technische Geplänkel hier?

Die Frage steht seit Urzeiten hier im Raum. Vielleicht lässt sich Gaby ja noch dazu herab, sie zu beantworten.

🖖 Live long and prosper

[Gabriele]

Hallo Gunnar,

Wollen Nutzer, um an weiterführende Links zu kommen, eine zusätzliche Interaktion?

Nein

Oder sollten die zwei Links nicht gleich angezeigt werden (so viel Platz können sie ja nicht beanspruchen)?

Ich meine, ich hätte schon geschrieben, dass es mehr als zwei Links werden, je nach Anwendung bis zu 10!

Gruß

Gaby

[Gabriele]

Hallo Jürgen,

• Popover benötigt nur html. Legt die weiteren Inhalte frei positioniert über den Rest der Seite, Default ist mittig zentriert. Man kann aber auch anders positionieren. Wenn das Popover-Fenster relativ zum Öffnen-Button positioniert werden soll, kommt die Anchor-Technik zum Einsatz. Und die benötigt Stand heute im Firefox einen Javascript-Polyfill. Den kannst du vom CDN holen oder auch selbst hosten.

Also doch Javascript. Und hat schon jemand untersucht, welchen Schaden das sehr große, unübersichtliche Javascript anstellen kann?

[Rolf B]

Hallo Gabriele,

man kann sich auch auf den Standpunkt stellen, dass Ankerpositionierung ein progressive enhancement ist, das nicht zwingend nötig ist. Dann kann man auf den Polyfill verzichten.

Rolf

[Gabriele]

Sorry, ich hatte vergessen, mein Beispiel anzugeben!

<!DOCTYPE html>
<html lang="de">
<head>
  <style> 
    body {
      background-color:lightgray;
    }  	
    li {
      background-color:gray;
    }	
  </style>
</head>
<body>



<details class="links">
  <summary>Klick me</summary>
  <ul>
    <li><a href="https://www.#########.de">Thema 1</a></li>
    <li><a href="https://www.*********.de">Thema 2</a></li>
    <li><a href="https://www.$$$$$$$$$.de">Thema 3</a></li>
  </ul>
</details>
</body>
</html>

Gruß an alle

[Gunnar Bittersmann]

@@Gabriele

ganz ohne JavaScript mit dem dialog-Element:

Du hast dir den weniger wichtigen Punkt in @Matthias Scharwies’ Antwort rausgepickt und den wichtigsten Punkt ignoriert‽

Deshalb nochmal die Frage: Wenn die Links unwichtig sind, warum willst du sie überhaupt anzeigen lassen?

Falls sie doch wichtig sein sollten, warum willst du sie nicht gleich anzeigen lassen?

🖖 Live long and prosper

[MudGuard]

Hi,

ich möchte in der Fußzeile einen Link anbringen.

Wenn man auf diesen klickt, soll ein kleines Fenster (über der aktuellen Seite) aufgehen mit der Überschrift "Weitergehende Infos" und darunter 2 Links.

Möchte der Besucher Deiner Seite das auch?

Wie kann ich so etwas realisieren?

evtl mit details und summary

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

Möchte der Besucher Deiner Seite das auch?

Gabriele sollte sich gut überlegen, ob eine Zeile Text und zwei Links nicht sofort angezeigt werden sollten.

Wie kann ich so etwas realisieren?

evtl mit details und summary

ist mir auch gerade wieder eingefallen.

Und popover wäre evtl. auch eine Option.

Gruß
Jürgen