Versions-Historie des Beitrags „Problem mit transitions“

Problem mit transitions

bearbeitet von trunx 18.02.2018 01:02

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. ~~~ html <!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: ~~~ css 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

Problem mit transitions

bearbeitet von

dedlfix 18.02.2018 07:38

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. ~~~ html,good <!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: ~~~ css 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

Problem mit transitions

bearbeitet von trunx 18.02.2018 01:07

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. ~~~ html,good <!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 tabindex="0"></li> </ul></nav> </body> </html> ~~~ Die veränderliche Größe wäre die Höhe, dennoch würde ich folgende Syntax verwenden: ~~~ css 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

Problem mit transitions

bearbeitet von trunx 18.02.2018 01:06

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. ~~~ html,good <!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 tabindex="0"></li> </ul></nav> </body> </html> ~~~ Die veränderliche Größe wäre die Höhe, dennoch würde ich folgende Syntax verwenden: ~~~ css 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

Problem mit transitions

bearbeitet von trunx 18.02.2018 01:05

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. ~~~ html,good <!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; } transition: all ease 1s; </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 tabindex="0"></li> </ul></nav> </body> </html> ~~~ Die veränderliche Größe wäre die Höhe, dennoch würde ich folgende Syntax verwenden: ~~~ css 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