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
<nav> <label for="toggle">☰<span>MAIN MENU</span></label> <input type="checkbox" id="toggle"> <ul> <li><a href="index.php?str=uvod"><i class="fas fa-home"></i> ÚVOD</a></li> <li><a href="user.php?str=user&stranka=domu"><i class="fas fa-user-secret"></i> PROFIL</a></li> <li><a href="novinky.php?str=novinky&quantity=6&what=all"><i class="far fa-newspaper"></i> NOVINKY</a></li> <li><label for="turnaje"><a><i class="fas fa-skull"></i> TURNAJE <i class="fas fa-angle-double-down visible_i"></i></a></label><input type="checkbox" id="turnaje"> <ul> <li><a href="pravidla.php?str=pravidla"><i class="fas fa-ruler"></i> PRAVIDLA</a></li> <li><a href="bodovani_squad.php?str=bodovani"><i class="fas fa-star-half-alt"></i> BODOVÁNÍ</a></li> <li><a href="vysledky.php?str=vysledky"><i class="fas fa-vials"></i> VÝSLEDKY</a></li> </ul> </li> <li class="aktivni"><a href="faq.php?str=faq"><i class="far fa-question-circle"></i> FAQ</a></li> <li><a href="kontakt.php?str=kontakt"><i class="fas fa-file-contract"></i> KONTAKT</a></li> <li><a href="#?str=hledame"><i class="fas fa-search"></i> HLEDÁME</a></li> </ul> </nav>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
nav>label, nav input { display: none; } nav { height: 65px; } ul { background-color: blue; margin: 0 auto; padding: 0; } nav > ul { display: flex; height: 100%; justify-content: center; align-content: center; align-items: center; } li { background-color: red; list-style-type: none; } nav > ul > li { flex: 0 1 auto; position: relative; margin: 0 1em; text-align: center; } a { background-color: yellow; } ul ul { display: none; position: absolute; width: 200%; left: -50%; } #turnaje:checked + ul { display: block;
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>