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 class="menu"> <nobr> <ul> <li class="rozbalovany"><a href="pokus.html">Domů</a> </li> <li class="rozbalovany"><a onclick="zobrazSkryj('oddil1')">Atletika</a></li> <ul id="oddil1" class="skryvany"> <li class="skryty"><a href="novinky.php">Novinky</a></li> <li class="skryty"><a>Jednotlivé discilíny.</a></li> <li class="skryty"><a>Nejdůležitější závody roku</a></li> <li class="skryty"><a>Nejdůležitější osobnosti</a></li> </ul> <li class="rozbalovany"><a onclick="zobrazSkryj('oddil2')">Strava</a> </li> <ul id="oddil2" class="skryvany"> <li class="skryty"><a>Jak správně jíst</a></li> <li class="skryty"><a>Nejoblíbenější recepty</a></li> <li class="skryty"><a>Nejzobrazovanější autoři</a></li> </ul> <li class="rozbalovany"><a onclick="zobrazSkryj('oddil3')">Galerie</a></li> <ul id="oddil3" class="skryvany"> <li class="skryty"><a>Jak sme sportovali</a></li> <li class="skryty"><a>Jak sme dbali o naší stravu</a></li> </ul> </ul> </nobr> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu{position: absolute; top: 100px; left: 0px; width: 210px;height: auto;float: left; text-align: left; border: thin solid rgb(0,51,255);background: rgb(0,51,255);color: white;} .skryvany{display: none;} li.skryty{padding: 1px;} ul.{padding: 4px; } li.rozbalovany {padding: 3px ;} li {list-style-type: none;} a { padding: 1px 5px 1px 5px; border: outset 1px; font-weight: bold; text-decoration: none } a:link, a:visited { background: #000080; color: #fff } a:hover { background: #00f; color: #ff0; border: inset 1px }
CSS
Autoformát
CSS reset
Až na konci
function zobrazSkryj(idecko){ el=document.getElementById(idecko).style; el.display=(el.display == 'block')?'none':'block'; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>