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> <p class="menu"> <a href="#prva">1.položka</a> <a href="#druha">2.položka</a> <a href="#tretia">3.položka</a> </p> <div class="obsah"> <div id="prva" class="obal"> <table width="200" height="" border="1"> <tr> <td width="50%" rowspan="10" align="center">Ovocie</td> <td>jablko</td> </tr> <tr> <td>marhuľa</td> </tr> <tr> <td>slivka</td> </tr> <tr> <td>banán</td> </tr> <tr> <td>jahoda</td> </tr> <tr> <td>čerešňa</td> </tr> <tr> <td>ananás</td> </tr> <tr> <td>melón</td> </tr> <tr> <td>broskyňa</td> </tr> </table> </div> <div id="druha" class="obal"> <table width="200" height="" border="1"> <tr> <td width="50%" rowspan="10" align="center">Zelenina</td> <td>mrkva</td> </tr> <tr> <td>kaleráb</td> </tr> <tr> <td>cibuľa</td> </tr> <tr> <td>hrášok</td> </tr> <tr> <td>fazuľa</td> </tr> <tr> <td>paradajka</td> </tr> <tr> <td>uhorka</td> </tr> <tr> <td>zemiak</td> </tr> <tr> <td>kel</td> </tr> </table> </div> <div id="tretia" class="obal"> <table width="200" height="" border="1"> <tr> <td width="50%" rowspan="10" align="center">Ovocie</td> <td>jablko</td> </tr> <tr> <td>marhuľa</td> </tr> <tr> <td>slivka</td> </tr> <tr> <td>banán</td> </tr> <tr> <td>jahoda</td> </tr> <tr> <td>čerešňa</td> </tr> <tr> <td>ananás</td> </tr> <tr> <td>melón</td> </tr> <tr> <td>broskyňa</td> </tr> </table> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu { position: fixed; left: 0; top: 0; width: 100%; border-top: 1px solid; border-bottom: 1px solid; line-height: 30px; text-align: center; } a { color: #000; text-decoration: none; padding: 5px 10px; } .obsah { position: absolute; top: -50px; margin-top: 50px; height: 350px; overflow: hidden; } .obal { padding-top: 65px; margin-bottom: 65px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>