nicht angemeldet
Problem mit transitions
0 
Gunnar Bittersmann
0 0 
Matthias Apsel
0
0
Problem mit transitions
Hallo an alle,
wie im Betreff bereits geschrieben habe ich Probleme damit das folgende, an sich funktionierende (Beispiel)Menü über transitions geschmeidiger laufen zu lassen. Hier bisheriges html und css.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
ul { padding: 0; margin: 0; border: 0; }
li {
width: 10em;
min-height: 1em;
padding: 0.5em 0 0.5em 1em;
max-width: 80vw;
border-top: 1px dotted black;
list-style: none
}
li>ul { height: 0em; overflow: hidden; }
li:focus { outline: none; }
li:focus>ul, li:focus-within>ul, div:focus-within>ul>li:focus>ul {
height: auto; overflow: visible; outline: none;
}
</style>
<title>Menü hoffentlich bald mit Transitions</title>
</head>
<body>
<nav><ul>
<li tabindex="0" style="border:0">Kat 1
<ul>
<li tabindex="0">UKat 1.1
<ul>
<li>UKat 1.1.1</li>
<li>UKat 1.1.2</li>
<li>UKat 1.1.3</li>
</ul></li>
<li tabindex="0">UKat 1.2
<ul>
<li>UKat 1.2.1</li>
<li>UKat 1.2.2</li>
<li>UKat 1.2.3</li>
</ul></li>
<li tabindex="0">UKat 1.3
<ul>
<li>UKat 1.3.1</li>
<li>UKat 1.3.2</li>
<li>UKat 1.3.3</li>
</ul></li>
</ul></li>
<li tabindex="0">Kat 2
<ul>
<li tabindex="0">UKat 2.1
<ul>
<li>UKat 2.1.1</li>
<li>UKat 2.1.2</li>
<li>UKat 2.1.3</li>
</ul></li>
<li tabindex="0">UKat 2.2
<ul>
<li>UKat 2.2.1</li>
<li>UKat 2.2.2</li>
<li>UKat 2.2.3</li>
</ul></li>
<li tabindex="0">UKat 2.3
<ul>
<li>UKat 2.3.1</li>
<li>UKat 2.3.2</li>
<li>UKat 2.3.3</li>
</ul></li>
</ul></li>
<li tabindex="0">Kat 3
<ul>
<li tabindex="0">UKat 3.1
<ul>
<li>UKat 3.1.1</li>
<li>UKat 3.1.2</li>
<li>UKat 3.1.3</li>
</ul></li>
<li tabindex="0">UKat 3.2
<ul>
<li>UKat 3.2.1</li>
<li>UKat 3.2.2</li>
<li>UKat 3.2.3</li>
</ul></li>
<li tabindex="0">UKat 3.3
<ul>
<li>UKat 3.3.1</li>
<li>UKat 3.3.2</li>
<li>UKat 3.3.3</li>
</ul></li>
</ul></li>
</ul></nav>
</body>
</html>
Die veränderliche Größe wäre die Höhe, dennoch würde ich folgende Syntax verwenden:
transition: all ease 0.7s;
Wenn das Menü nur einfach verschachtelt wäre, ist das ganze kein Problem, aber die drei Ebenen schon. Hat jemand damit Erfahrungen und kann mir eventuell weiter helfen?
Das wäre nett :)
vielen Dank trunx
-
@@trunx
Hier bisheriges html und css.
Wo kann man sich das ansehen?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
ich entwickle das zu Hause bei mir lokal auf dem Rechner. Deshalb hatte ich den Quelltext oben mit angefügt. Jetzt habe ich die Datei aber mal unter https://www.buero-ix.de/test/transitions.html abgelegt. Dabei habe ich festgestellt, dass das Aufklappen an sich auch noch nicht browserübergreifend funktioniert, sprich, es funktioniert im firefox und chrome und nicht mit edge, IE11 und auf meinem android (mit dem android chrome wiederum funktioniert es).
Naja, noch viel zu tun 😂
Danke trotzdem
bye trunx
-
Hallo trunx,
ich entwickle das zu Hause bei mir lokal auf dem Rechner. Deshalb hatte ich den Quelltext oben mit angefügt. Jetzt habe ich die Datei aber mal unter https://www.buero-ix.de/test/transitions.html abgelegt.
Für solche Fälle gibt es diverse kostenlose Spielwiesen
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
danke für die Links. Helfen diese Spielwiesen denn, um die Probleme mit der Browserkompatibilität sofort zu erkennen?
trunx
-
Hallo trunx,
Helfen diese Spielwiesen denn, um die Probleme mit der Browserkompatibilität sofort zu erkennen?
Probleme mit der Browserkompatibilität erkennst du dann, wenn du die Seite mit verschiedenen Browsern testest. Insofern verstehe ich die Frage nicht.
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
Probleme mit der Browserkompatibilität erkennst du dann, wenn du die Seite mit verschiedenen Browsern testest.
genauso mache ich es.
Dann verstehe ich im Moment grad nicht, warum du mir nun die Links geschickt hast, wie genau hilft es mir bei meinem Problem?Hier mal ein Link https://jsfiddle.net/mm63hxb6/3/ zum Spielen :)
vielen Dank trunx
-
-
-
-
-
-
Das würde mit parent-Selektoren funktionieren, die es aber leider nicht gibt - oder doch?