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
<h1> Ukážka oddelovača v menu </h1> <h2 id="obycajne"> <a href="#obycajne">~</a> Obyčajné menu, bez oddelovača, zobrazené s <code>display: inline-block</code> </h2> <ul> <li>položka 01</li> <li>položka 02</li> <li>položka 03</li> <li>položka 04</li> </ul> <h2 id="pajpa"> <a href="#pajpa">~</a> Použitý textový oddelovač pajpa ( | ) </h2> <ul> <li>položka 01</li> <li>položka 02</li> <li>položka 03</li> <li>položka 04</li> </ul> <h2 id="obrazok"> <a href="#obrazok">~</a> Použitý obrázkový separátor ( <img src="http://www.myscreen.cz/img/a7db3d45a9e325bd95d0316290bdc04ddcafece1" style="vertical-align: middle" alt="obrázkový rozdelovač"> ) </h2> <ul> <li>položka 01</li> <li>položka 02</li> <li>položka 03</li> <li>položka 04</li> </ul> <footer>Vytvoril ~<a href="http://diskuse.jakpsatweb.cz/?action=userinfo&user=24896">Kubo2</a>, vzťahuje sa k <a href="http://djpw.cz/153793">téme na diskusii</a></footer>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Nevšímať si, to je iba štýl pre nadpisy * Štýl pre rozdelovače je nižšie */ h2[id]:hover:after, h2[id]:target:after { color: gray; font-weight: normal; font-size: 82%; font-family: "Bookman Old Style", Arial; margin-left: 10px; content: "kotva #" attr(id) } h2[id]:target { background: rgb(252, 171, 22); background: rgba(252, 171, 22, 0.68); transition: .8s; } h2[id] > a[href^="#"] { color: blue } h2[id] > a[href^="#"]:hover { text-decoration: none; } /*============================== * == Tu začína štýl pre menu == *==============================*/ /* obyčajné menu */ #obycajne + ul > li { display: inline-block; } /* Menu s textovým oddelovačom */ #pajpa + ul > li { display: inline-block; } #pajpa + ul > li:after { content: " | "; /*vertical-align: top;*/ font-size: 100%; color: gray; } #pajpa + ul > li:last-child:after { content: ""; } /* Menu s obrázkovým oddelovačom */ #obrazok + ul > li { display: inline-block; } #obrazok + ul > li:after { /* princíp je ten istý ako u textovej varianty */ display: inline-block; content: url(http://www.myscreen.cz/img/a7db3d45a9e325bd95d0316290bdc04ddcafece1); vertical-align: -50%; margin: 0 3.2px; } #obrazok + ul > li:last-child:after { /* aj tu treba oddelovač po poslednom elemente odstrániť */ content: ""; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>