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"> <title></title> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="hlavicka"> <div id="horizontalni-menu"> <div class="logo"><a href="#">JaPaJP</a></div> <label for="display-menu" class="our-menu">Menu</label> <input type="checkbox" id="display-menu" role="button" /> <ul> <li><a href="#" class="aktualni">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> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@charset "utf-8"; /* CSS Document */ 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: #FFFFFF; } #hlavicka { min-width: 100%; height: 56px; background: #e74c3c; } #display-menu { display: none; } #display-menu:checked ~ #horizontalni-menu { display: block; } .our-menu { text-decoration: none; color: #ffffff; background: #e74c3c; text-align: center; padding-top: 20px; padding-right: 0; padding-left: 0; padding-bottom: 20px; display: none; font-weight: bold; } #horizontalni-menu { width: 1000px; margin: 0 auto; position: static; } .logo { color: #fff; float: left; line-height: 2em; font-size: 2em; text-decoration: none; font-weight: bold; margin: -20px 0 -20px 40px; } .logo a { color: #fff; text-decoration: none; } #horizontalni-menu ul { float: right; margin: 0; } #horizontalni-menu li { display: inline; height: auto; float: left; } #horizontalni-menu a { display: block; float: left; padding: 20px 15px 19px 15px; text-decoration: none; color: #FFFFFF; font-weight: bold; } #horizontalni-menu li a:hover, #horizontalni-menu li .aktualni { background-color: #7F522F; } .clear {clear: both} @media screen and (max-width : 750px){ .our-menu { display: block; } #hlavicka { width: 92.5%; } .logo { margin-left: 35%; } #horizontalni-menu { position: static; display: none; margin-top: 1px; } #horizontalni-menu li { margin-bottom: 1px; } #horizontalni-menu li { width: 100%; } #horizontalni-menu li a { width: 100%; display: block; text-decoration: none; height: 5px; min-width: 140px; text-align: center; line-height: 10px; color: #ffffff; background: #e74c3c; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>