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
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>rhm</title> </head> <body> <nav id="hlavicka"> <a id="logo" href="#">JaPaJP</a> <label for="display-menu" class="our-menu">Menu</label> <input type="checkbox" id="display-menu" role="button" /> <ul id="menu"> <li><a class="aktualni" href="#">Domu</a></li> <li><a href="#">novinky</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Ostatní</a></li> <li><a href="#">Ke stažení</a></li> <li><a href="#">Jine</a></li> </ul> </nav> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0; padding: 0; font-family: Arial, Helvetica, Geneva, sans-serif, Verdana, Source Sans Pro, Tahoma, "Times New Roman", Georgia; font-size: 14px; color: #111; background-color: #ccc; } #hlavicka { width: 100%; float: left; height: 50px; background-color: #2f2f2f; } #logo { line-height: 55px; height: 50px; margin: 0 0 0 38%; color: #fff; float: left; width: 250px; font-size: 2em; text-decoration: none; font-weight: bold; } #display-menu { display: none; } #display-menu:checked ~ #menu { display: block; } .our-menu { text-decoration: none; color: #ffffff; background: #2f2f2f; text-align: center; padding: 6px 0; display: none; } ul { list-style-type:none; position: absolute; margin:0px; padding:0px; } li { float: left; margin-right: 1px; display:inline-block; font-weight: bold; } li a { display: block; text-decoration: none; height: 35px; min-width: 145px; text-align: center; line-height: 35px; color: #ffffff; background: #2f2f2f; } #menu li a:hover, #menu li .aktualni { background-color: #0078d7; } @media screen and (max-width : 750px){ .our-menu { display:block; } ul { position: static; display: none; } li { margin-bottom: 1px; } ul li, li a { width: 100%; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>