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
<main class="main2"> <nav> <ul> <li><a href="index.html"><b>Aktuality</b></a> <li><a href="historie.html"><b>Založení sboru</b></a> <ul> <li><a href="historie1.html"><b>Historie</b></a> <li><a href="cinnostsboru.html"><b>Činnost sboru po osvobození</b></a> <li><a href="cinnost.html"><b>Z činnosti za léta 1980 - 1990</b></a> <li><a href="organizace.html"><b>Organizační činnost</b></a> <li><a href="19902000.html"><b>1990 - 2000</b></a> <li><a href="20012009.html"><b>2001 - 2009</b></a> </ul> </li> <li><a><b class="kurzor">Zásahy</b></a> <ul><li><a href="zasahy2009.html"><b>2009</b></a> <li><a href="zasahy2010.html"><b>2010</b></a> <li><a href="zasahy2011.html"><b>2011</b></a> </ul> <li><a><b class="kurzor">Technické vybavení sboru</b></a> <ul><li><a href="vozidla.html"><b>Vozidla</b></a> <li><a href="strikacky.html"><b>Stříkačky</b></a> <li><a href="mcerpadla.html"><b>motorové čerpadla</b></a> <li><a href="mpila.html"><b>motorová pila</b></a> <li><a href="proudnice.html"><b>Proudnice</b></a> <li><a href="vstan.html"><b>Vojenský stan</b></a> <li><a href="zvybaveni.html"><b>Zásahové vybavení</b></a> </ul> <li><a href="fotogalerie.html"><b>Fotogalerie</b></a> <li><a href="videogalerie.html"><b>Videogalerie</b></a> </ul> </nav> </main> <main class="main5"> <nav class="zindex"> <ul> <li><a href="#" class="kurzor"><b>Soutěže</b></a> <ul><li><a href="muzi.html"><b>Muži</b></a> <li><a href="zaci.html"><b>Žáci</b></a> </ul> <li><a href="dokumenty.html"><b>Dokumenty</b></a> <li><a href="pronajem.html"><b>Pronájem</b></a> <li><a href="odkazy.html"><b>Odkazy</b></a> <li><a href="kontakt.php"><b>Kontakt</b></a> <li><a href="vyborsdh.html"><b>Výbor SDH</b></a> <li><a href="https://www.facebook.com/sdh.prostrednibecva?fref=ts" target="_blank" class="Facebook"><b>Facebook</b></a> </ul> </nav> </main>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { font-family:"Comic sans MS"; background-image: url("obrazky/pozadi1.jpg"); background-position:center center; background-attachment: fixed; background-color:#696969; margin-top:0px; margin-left:0px; margin-right:0px; } nav { display: inline-block; position: relative; z-index:1; } nav ul { /* zrušíme odrážky a odsazení seznamů a ukončíme plavání pomocí overflow */ list-style:none; padding: 0; margin:0; border-radius:20px; overflow: hidden; } nav>ul>li { /* první úroveň musí plavat; ostatní nesmí */ float:left; } nav ul ul { /* skrýt podmenu a vyhodit jej ze stránky */ display:none; position:absolute; } nav ul li:hover ul{ /* při hoveru zobrazit to podmenu */ display:block; } nav a { /* odkazy jsou blokové a mají padding + barvičky */ text-decoration:none; color:#000000; background:#ffffff; padding:10px 40px; display: block; border-radius:20px; } nav a:hover{ /* barvičky při najetí */ background-color:#e6e6fa; color:#ff0000; text-shadow: 1px 2px 10px #ff0000; } nav ul ul a:hover{ /* barvičky podmenu při najetí */ color: #008000; text-shadow: 1px 2px 10px #008000; } nav ul ul li a { border: 1px solid black; } .main2 { font-family:Verdana; text-shadow: 1px 2px 4px #696969; width:auto; text-align:center; z-index:5; } .kurzor{ cursor:default; } .main5{ font-family:Verdana; text-shadow: 1px 2px 4px #696969; width:auto; text-align:center; } .zindex{ z-index:0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>