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="nav"> <div class="center"> <ul> <li><a href="#1">Položka 1</a></li> <li><a href="#2">Položka 2</a></li> <li><a href="#3">Položka 3</a></li> <li><a href="#4">Položka 4</a></li> </ul> <div class="clear"></div> </div> </div> <div class="space"></div> <span id="1">Položka 1</span> <div class="space"></div> <span id="2">Položka 2</span> <div class="space"></div> <span id="3">Položka 3</span> <div class="space"></div> <span id="4">Položka 4</span> </body></html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* === DEFAULT DECLARATIONS === */ .space { height: 600px; } span { color: white; padding: 20px; } span { margin-top: -60px; padding-top: 60px; } body { margin: 0; } a { color: #000; } a:hover { text-decoration: none; } ul { margin: 0; padding: 0; } html, body { height: 100%; } body { background-color: #222; font-family: Cambria, Calibri, Serif, "Times New Roman"; font-size: 1em; } #nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background-color: #A00315; border-bottom: 1px solid #000; } .center { width: auto; max-width: 1024px; min-width: 550px; margin: auto; } .clear { clear: both; } #nav ul { margin: 0 20px; list-style: none; } #nav li { line-height: 48px; float: left; } #nav li a { display: block; padding: 0 15px; border-left: 1px solid #BF0306; border-right: 1px solid #6B0203; color: #FFF; text-decoration: none; } #nav li a.active { background-color: #111; border-left: 1px solid #000; border-right: 1px solid #000; } /* === PSEUDO DECLARATIONS === */ #nav li a:hover, #nav li a:focus { background: #111; border-left: 1px solid #111; border-right: 1px solid #111; } #nav li a.active:hover, #nav li a.active:hover { background-color: #111; } /* === RESPONSIVE DECLARATIONS === */ @media screen and (min-width: 1400px) { body { font-size: 1.1em; } .center { max-width: 1200px; } } @media screen and (max-height: 400px) { #nav { position: static; } } @media screen and (max-width: 600px) { #nav { position: static; } #nav ul { margin: 0; } #nav li { line-height: 36px; } #nav li a { padding: 0 10px; } } @media screen and (max-width: 600px) and (min-width: 320px) { .center { min-width: 280px; } } @media screen and (max-width: 460px) { #nav li { width: 50%; text-align: center; } #nav li a { border-top: 1px solid #BF0306; border-bottom: 1px solid #6B0203; } #nav li a:hover { border-top: 1px solid #111; border-bottom: 1px solid #111; } #nav li a.active { border-top: 1px solid #000; border-bottom: 1px solid #000; } } @media screen and (max-width: 321px){ body { font-size: .9em; } .center { min-width: 100px; } #nav { min-width: 100px; border-bottom: 0 none; } #nav li { float: none; width: auto; } #nav li a, #nav li a:hover, #nav li a.active { border-left: 0 none; border-right: 0 none; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>