Wie kann man mit CSS etwas "ausblenden"?
Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:
https://jsbin.com/vaxayibeme/1/edit?html,css,output
Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.
Wenn man mit der Maus in diesem Bereich ist:
öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).
Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.
Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.
Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).
Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).
(ist in meiner Antwort, weil es hier sonst auch zu lang ist)
1 Antwort
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="ctxmenu">
<div class="submenu left up">
<div class="entry label">Einfügen</div>
<div class="entries">
<div class="submenu left up">
<div class="entry label">Darüber</div>
<div class="entries">
<div class="entry">String</div>
<div class="entry">Number</div>
<div class="entry">Boolean</div>
<div class="entry">Array</div>
<div class="entry">Object</div>
<div class="entry">Null</div>
</div>
</div>
<div class="submenu left up">
<div class="entry label">Darunter</div>
<div class="entries">
<div class="entry">String</div>
<div class="entry">Number</div>
<div class="entry">Boolean</div>
<div class="entry">Array</div>
<div class="entry">Object</div>
<div class="entry">Null</div>
</div>
</div>
</div>
</div>
<div class="submenu left up">
<div class="entry label">Verschieben</div>
<div class="entries">
<div class="entry">Nach oben</div>
<div class="entry">Zeile hoch</div>
<div class="entry">Zeile runter</div>
<div class="entry">Nach unten</div>
</div>
</div>
<div class="entry">Löschen</div>
<div class="submenu left up">
<div class="entry label">Typ ändern</div>
<div class="entries">
<div class="entry">String</div>
<div class="entry">Number</div>
<div class="entry">Boolean</div>
<div class="entry">Array</div>
<div class="entry">Object</div>
<div class="entry">Null</div>
</div>
</div>
<div class="entry">Aufklappen</div>
<div class="entry">Zuklappen</div>
<div class="entry">Alle aufklappen</div>
<div class="entry">Alle zuklappen</div>
</div>
</body>
</html>
CSS:
body
{
background: #222;
color: #DDD;
border-color: #AAA;
font-family: Arial;
}
.ctxmenu
{
position: fixed;
z-index: 999;
background: inherit;
top: 200px;
left: 300px;
}
.ctxmenu *
{
background: inherit;
position: relative;
}
.ctxmenu > *, .entries > *
{
padding: 5px 10px;
white-space: nowrap;
cursor: default;
}
.ctxmenu .entry
{
transition: all linear 200ms;
}
/* Fallback für Firefox < 121 */
.ctxmenu .entry:hover
{
background: #111;
transition: all linear 200ms;
}
.ctxmenu .entry:hover, .ctxmenu .submenu > :first-child:has(+ :hover)
{
background: #111;
transition: all linear 200ms;
}
.ctxmenu .submenu
{
padding: 0;
}
.ctxmenu .submenu:hover
{
z-index: 100;
}
.ctxmenu .submenu > :not(.entries)
{
padding: 5px 10px;
}
.ctxmenu .submenu > .entries
{
position: absolute;
top: 0;
right: 0;
translate: 0%;
opacity: 0;
transition: all linear 300ms;
/*display: none;*/
}
.ctxmenu .submenu:hover > .entries
{
translate: 100%;
opacity: 1;
transition: all linear 300ms;
}
.ctxmenu .submenu.right > .entry.label::after,
.ctxmenu .submenu:not(.left) .entry.label::after
{
content: ">";
float: right;
padding-left: 10px;
}
.ctxmenu .submenu.left > .entry.label::after
{
content: "<";
float: left;
padding-right: 10px;
}
.ctxmenu .submenu.right > .entries
{
right: 0;
translate: 100%;
}
.ctxmenu .submenu.left > .entries
{
left: 0;
translate: -100%;
}
.ctxmenu .submenu.up > .entries
{
top: 100%;
transform: translateY(-100%);
}
.ctxmenu .submenu.down > .entries
{
top: 0;
transform: translateY(0);
}
.ctxmenu, .ctxmenu .submenu:hover > .entries
{
display: block;
border: solid 2px #AAA;
border-radius: 5px;
}