Das Kontextmenü ist ein modaler Dialog, der sich am geklickten Button ausrichtet. Der Hintergrund wird nicht gefiltert. Jeder Klick auf einen Link oder Button schliesst das Kontextmenü. Bei Smartphones (kleiner als 480 Pixel Breite oder Höhe) wird das Kontextmenü aus Platzgründen wie ein Standard-Dialog behandelt.
Ich gehe davon aus, dass du das HTML und das Javascript gemäss der Dialoge-Anleitung eingrichtet hast. Insbesondere die dialog.js übernimmt hier einen massgeblichen Anteil.
Das Kontextmenü wird über die CSS-Klasse context behandelt.
dialog.context[data-dialog-arrow] {
margin: 0;
overflow: visible;
&::backdrop {
opacity: 0;
}
&::after {
box-shadow: color-mix(in oklab, var(--text-color), transparent 50%) -0.4rem 0.4rem 0.4rem;
border: 1rem solid transparent;
border-color: transparent transparent var(--default2-color) var(--default2-color);
transform-origin: 0 0;
transform: rotate(135deg);
left: 3.2rem;
content: '';
position: absolute;
width: 0;
height: 0;
margin-top: 0.1rem;
box-sizing: border-box;
display: block;
}
&[data-dialog-arrow='bottom-left']::after {
border-color: transparent transparent var(--bg-color) var(--bg-color);
bottom: -2.6rem;
transform-origin: -2.4rem 3.2rem;
transform: rotate(315deg);
}
&[data-dialog-arrow='top-right']::after {
border-color: transparent transparent var(--default2-color) var(--default2-color);
left: auto;
right: -1.6rem;
}
&[data-dialog-arrow='bottom-right']::after {
border-color: transparent transparent var(--bg-color) var(--bg-color);
left: auto;
right: -1.6rem;
bottom: -2.6rem;
transform-origin: -2.4rem 3.2rem;
transform: rotate(315deg);
}
}
Alle weiteren Styles können vom Standard-Dialog geerbt werden.
Das HTML für das Kontextmenü unterscheidet sich nur durch die class="context" vom Standard-Dialog.
<dialog class="context">
<header class="dialogHeader">
<p>Beispiel;</p>
<button class="icon icon-close" data-dialog-close="1" title="Dialog schliesssen"></button>
</header>
<div class="dialogContent">
<p>Das ist ein Dialog.</p>
</div>
</dialog>
Damit ist bereits alles Notwendige getan. Alles Weitere übernimmt die dialog.js. Wir können den Kontext-Dialog also gleich testen.
Eine nicht-modale Variante des Kontextmenüs ist das Flyout. Möglicherweise scheint dir dies geeigneter.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.