trunx: Problem mit transitions

Beitrag lesen

SELF-Forum

Problem mit transitions

trunx (Versionen)
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln