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
<title>Rozklikávací menu bez JS pomocí :focus-within</title> <h1>Rozklikávací menu bez JS pomocí <code>:focus-within</code></h1> <div class="menu"> <p> <button>Zobrazit</button> </p> <div class="menu__content"> <a href="#1">Odkaz</a> <a href="#2">Odkaz</a> <a href="#3">Odkaz</a> <a href="#4">Odkaz</a> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu:focus-within .menu__content { display: inline-block; } .menu__content { display: none; border: 1px solid #000; } .menu__content a { display: block; padding: .5em 1em; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>