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="navigace"> <ul id="menu"> <li><a href="#">Úvod</a></li> <li><a href="#">Seznam</a></li> <li class=active><a href="#">Strouhanka</a></li> <li><a href="#">WD 40</a></li> </ul> </div> <a href="data:sex/png;base64,iVBORw0KGgoAAAANSUhEUgAAAisAAAA9CAMAAABbYNm1AAAAllBMVEUAAAAAAAAAAAAsJR8zKyQzKyQsJR8WExAGBQQzKyQzKyQzKyQzKyQzKyQzKyQzKyQoIhwzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyRtE2j/AAAAMXRSTlOAADSsmPumUDkhrPB1QdAFjxUCaerAMA+M+d5VJ7XzfQhJ1/2gGgRx7sc3FORdL3gLC7lXpwAAAOxJREFUeF7t0s1GBAAAhdF7SxSNRBKJSCL1/s8RQ0qbSCSRWY2SqUWMMT9GqxbnLK+7/Jr1QPNfoRW0glZAK2gFraAVtIJW0ApoBa2gFbSCVtAKaAWtoBW0glbQCloBraAVtIJW0ApaAa2gFbSCVtAKWkEroBW0glbQClpBK6AVtIJW0ApaQSvQjZCtyVdWGIw/QtqQbPciy9x3czQdtMJuz7LIcDJ4nxm0wn57kjlPfZ3btMJhe5QZL33OIlrhuAeZemsfs4RWOO3e7zBqH7KcVjhvd5Jk3NusphUu73r12eEaT61w3d7kr7QC362OF0rQMcqGAAAAAElFTkSuQmCC">zobáček - obrázek ke stažení</a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#navigace { background: url('http://www.oddel.servispc-luze.cz/menu.png'); } #menu { height:51px; line-height: 51px; margin-top: 42px; } #menu li { float: left; list-style: none; height: 51px; } #menu li a { float: left; text-decoration: none; color: gold; height: 100%; padding: 0 20px; border-right: 1px solid gold; } #menu li:first-child a { border-left: 1px solid red; } #menu li:active {:-} #menu li.active { padding-bottom: 10px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAisAAAA9CAMAAABbYNm1AAAAllBMVEUAAAAAAAAAAAAsJR8zKyQzKyQsJR8WExAGBQQzKyQzKyQzKyQzKyQzKyQzKyQzKyQoIhwzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyRtE2j/AAAAMXRSTlOAADSsmPumUDkhrPB1QdAFjxUCaerAMA+M+d5VJ7XzfQhJ1/2gGgRx7sc3FORdL3gLC7lXpwAAAOxJREFUeF7t0s1GBAAAhdF7SxSNRBKJSCL1/s8RQ0qbSCSRWY2SqUWMMT9GqxbnLK+7/Jr1QPNfoRW0glZAK2gFraAVtIJW0ApoBa2gFbSCVtAKaAWtoBW0glbQCloBraAVtIJW0ApaAa2gFbSCVtAKWkEroBW0glbQClpBK6AVtIJW0ApaQSvQjZCtyVdWGIw/QtqQbPciy9x3czQdtMJuz7LIcDJ4nxm0wn57kjlPfZ3btMJhe5QZL33OIlrhuAeZemsfs4RWOO3e7zBqH7KcVjhvd5Jk3NusphUu73r12eEaT61w3d7kr7QC362OF0rQMcqGAAAAAElFTkSuQmCC) center;} #menu li:hover { padding-bottom: 10px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAisAAAA9CAMAAABbYNm1AAAAllBMVEUAAAAAAAAAAAAsJR8zKyQzKyQsJR8WExAGBQQzKyQzKyQzKyQzKyQzKyQzKyQzKyQoIhwzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyQzKyRtE2j/AAAAMXRSTlOAADSsmPumUDkhrPB1QdAFjxUCaerAMA+M+d5VJ7XzfQhJ1/2gGgRx7sc3FORdL3gLC7lXpwAAAOxJREFUeF7t0s1GBAAAhdF7SxSNRBKJSCL1/s8RQ0qbSCSRWY2SqUWMMT9GqxbnLK+7/Jr1QPNfoRW0glZAK2gFraAVtIJW0ApoBa2gFbSCVtAKaAWtoBW0glbQCloBraAVtIJW0ApaAa2gFbSCVtAKWkEroBW0glbQClpBK6AVtIJW0ApaQSvQjZCtyVdWGIw/QtqQbPciy9x3czQdtMJuz7LIcDJ4nxm0wn57kjlPfZ3btMJhe5QZL33OIlrhuAeZemsfs4RWOO3e7zBqH7KcVjhvd5Jk3NusphUu73r12eEaT61w3d7kr7QC362OF0rQMcqGAAAAAElFTkSuQmCC) center; } #menu li.active a:hover { color: yellow; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>