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> <ul> <li><a href="#">1. položka</a> <div> <ul> <li><a href="#">1. subpoložka</a> <ul> <li><a href="#">1. subsubpoložka</a></li> <li><a href="#">2. subsubpoložka</a></li> <li><a href="#">3. subsubpoložka</a></li> </ul> </li> <li><a href="#">2. subpoložka</a> <ul> <li><a href="#">1. subsubpoložka</a></li> <li><a href="#">2. subsubpoložka</a></li> <li><a href="#">3. subsubpoložka</a></li> </ul> </li> <li><a href="#">3. subpoložka</a></li> <li><a href="#">4. subpoložka</a></li> <li><a href="#">5. subpoložka</a></li> <li><a href="#">6. subpoložka</a></li> <li><a href="#">7. subpoložka</a></li> <li><a href="#">8. subpoložka</a></li> <li><a href="#">9. subpoložka</a></li> <li><a href="#">10. subpoložka</a></li> </ul> </div> </li> <li><a href="#">2. položka</a></li> <li><a href="#">3. položka</a></li> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* CSS reset */ ul { margin: 0; padding: 5px; list-style: none; } a { color: black; text-decoration: none; } /* Farba písma každého odkazu, ktorý je priamym potomkom prvku <li> bude zelená. */ li:hover > a { color: green; } /* Každý prvok <li>, ktorého rodič je prvok <ul>, ktorý je priamym potomkom prvku div, bude zobrazený ako riadkový s možnosťou nastavenia rozmerov. */ div > ul > li { display: inline-block; padding: 10px 20px; } /* Zneviditeľnenie prvej vysúvacej ponuky. */ div > ul li div { display: none; position: absolute; } /* Zobrazí každý <div>, ktorého (pokojne aj nepriamym) rodičom je prvok <li>, na ktorý sme zašli myškou, ktorého rodičom je prvok <ul>, ktorý má priameho rodiča prvok <div>. */ div > ul li:hover div { display: block; } div div { width: 100%; } /* Zneviditeľnenie druhej úrovne navigácie. */ div div ul ul { display: none; position: absolute; background: white; border: 1px solid black; } /* Opätovné zviditeľnenie navigácie ak nájdeme myšou na nadradenú položku <li> požadovaného zozanmu <ul>. */ div div ul li:hover 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>