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
<nav class="main-nav"> <ul> <li class="n1 active"><a href="">Úvod</a></li> <li class="n2"><a href="">Staňte se klientem</a></li> <li class="n3"><a href="">Poradenství pro jednotlivce</a></li> <li class="n4"><a href="">Poradenství pro skupiny</a></li> <li class="n5"><a href="">Kontakt</a></li> </ul> </nav>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.main-nav { font-family: 'Roboto Condensed', sans-serif; display: table; width: 100%; } .main-nav a:after { position: absolute; content: ''; display: block; left: 0; right: 0; top: 0; bottom: 0; } .main-nav ul { display: table-row; } .main-nav li { position: relative; display: table-cell; } .main-nav a { margin-bottom: -8px; display: inline-block; width: 100%; padding: 8px 0 12px; color: black; text-decoration: none; font-size: 1.4em; text-align: center; vertical-align: middle; } .main-nav li + li { border-left: 1px solid white; } .n1 { border-bottom: 8px solid #95be3f; } .n2 { border-bottom: 8px solid #59931b; } .n3 { border-bottom: 8px solid #f2932f; } .n4 { border-bottom: 8px solid #aa0058; } .n5 { border-bottom: 8px solid #b83f95; } .main-nav li:hover a { color: white; } .n1:hover, .n1.active { background-color: #95be3f; } .n2:hover, .n2.active { background-color: #59931b; } .n3:hover, .n3.active { background-color: #f2932f; } .n4:hover, .n4.active { background-color: #aa0058; } .n5:hover, .n5.active { background-color: #b83f95; } @media (max-width: 400px) { .main-nav li { display: block; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>