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
<div id="nav" role="navigation"> <!-- úprava Radek --> <ul class="primary"> <li> <a href="/index.html">Úvod</a> </li> <li> <a href="/pages/articles/articles.html">Články</a> </li> </ul> <input type="checkbox" id="button"> <label for="button" onclick></label> <ul class="secondary"> <li> <a href="/pages/sources/sources.html">Prameny</a> </li> <li> <a href="/pages/links/links.html">Odkazy</a> </li> <li> <a href="/pages/forum/forum.html">Fórum</a> </li> <li> <a href="/pages/download/download.html">Ke stažení</a> </li> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Fix pro Android, aby v něm fungoval Advanced Checkbox Hack */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } #nav { margin: 0.5%; border: 1px solid #A9A9A9; background: #C9C9C9; border-radius: 5px; } /* hlavní nabídka v jednom řádku s "kebab menu" */ #nav ul, label, input { display: inline-block; } #nav ul { margin: 0; padding: 0; font-weight: bold; list-style-type: none; } /* odkaz na Úvod a Články se zobrazuje neustále */ #nav ul.primary li { /* horizontální menu */ display: inline-block; } /* sekundární odkazy nejsou do kliknutí na "kebab menu" viditelné */ #nav ul.secondary { display: none; } /* po zaškrtnutí checkboxu se zobrazí sekundární odkazy */ #nav input[type=checkbox]:checked~ul, #nav ul li a { display: block; } #nav ul li a { padding: 10px; color: #3c3c3c; font-size: 23px; text-decoration: none; } /* nezobrazovat checkbox */ #nav input[type=checkbox] { display: none; } #nav input[type=checkbox]:checked~label:after { content: "\00d7"; } #nav input[type=checkbox]:not(:checked)~label:after { content: "..."; transform: translateY(-5px) translateX(-3px); } #nav label { cursor: pointer; margin-left: 10px; padding: 0 10px; border-radius: 5px; } #nav label:after { font-size: 24px; font-weight: bold; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); display: inline-block; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>