CSS Transition height
Jeg har nedenstående kode-eksempel.En hovedgruppe med undergrupper. Undergrupperne skal afsløres ved et klik på hovedgruppen. Antallet af undergrupper varierer og genereres af php.
Problemet er:
Hvordan får jeg transition til at fungere når jeg ikke kan bestemme height i pixels (antallet af undergrupper varierer) ?
Jeg vil gerne om det er muligt at holde løsningen i CSS.
Jeg har set på funktionerne i CSS men har ikke nok erfaring i at bruge det til at vide om der findes en løsning i CSS.
<!doctype html>
<html lang="da-DK" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input { display: none; }
ul {
overflow: hidden;
height: 20px;
transition: height 1s;
}
input:checked + ul {
height: 100px; /* ved '%' fungerer transition ikke. ved 'px' gør den. */
}
</style>
</head>
<body>
<nav>
<label>
<input type="checkbox" >
<ul>
<li>Hovedgruppe</li> <!-- hovedgruppe -->
<li>Undergrupper </li> <!-- Undergrupper - antallet varierer og generes af php-->
<li>Undergruppe </li>
<li>Undergruppe </li>
<li>Undergruppe </li>
<li>Undergruppe </li>
</ul>
</label>
</body>
</html>
