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
<ul class="modern-menu theme2"> <li><a href="index.php"><span>Home</span><span class="active">Home</span></a></li> <li><a href="kredity.php" class="active"><span>Kredity</span><span class="active">Kredity</span></a></li> <li><a href="shop.php"><span>Shop</span><span class="active">Shop</span></a></li> <li><a href="aukce.php"><span>Aukce</span><span class="active">Aukce</span></a></li> <li><a href="prikazy.php"><span>Příkazy</span><span class="active">Příkazy</span></a></li> <li><a href="forum"><span>Forum</span><span class="active">Forum</span></a></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.modern-menu { margin: 0; padding: 0; list-style: none; border-bottom: 5px solid #4AD; overflow: hidden; font: bold .825em "Helvetica Neue", Helvetica, Arial; } .modern-menu li { float: left; } .modern-menu a { position: relative; top: 0; text-decoration: none; text-transform: uppercase; color: #707070; transition: .2s; } .modern-menu a, .modern-menu span { display: block; } .modern-menu span { padding: 0 20px; line-height: 40px; background-color: #FAFAFA; } .modern-menu span.active { position: absolute; bottom: 100%; background-color: #44AADD; color: white; } .modern-menu a:hover { top: 100%; } .modern-menu a.active {top: 40px;} /*Zaujímavé, že tu to nejde vyriešiť všeobecne pomocou percent */
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>