Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<ul> <li>A<div class="block">blok</div><div class="line"></div></li> <li>B<div class="block">blok</div><div class="line"></div></li> <li>C<div class="block">blok</div><div class="line"></div></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul { position: relative; } li { list-style: none; } div.line { height: 0; width: 0; border-left: 1px none; border-bottom: 1px none; } div.block { position: absolute; margin-left: 3em; opacity: 0; transition: opacity 0.1s; } li:hover div.block { opacity: 1; transition: opacity 0.5s 1s; } li:hover div.line { height: 1em; width: 2em; border-left: 1px solid gray; border-bottom: 1px solid gray; transition: height 0.3s 0s, width 0.7s 0.3s; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>