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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Navigačné menu</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div id="navigacnemenu"> <ul> <li><a href="#" class="active" title="Domov"><i class="fa fa-home"></i> Domov</a></li> <li><a href="#" title="Novinky"><i class="fa fa-fire"></i> Novinky</a></li> <li class="roleta"><a href="#" title="Škola"><i class="fa fa-book"></i> Škola</a> <ul> <li><a href="#"><i class="fa fa-pencil"></i> Aktivity školy</a></li> <li><a href="#"><i class="fa fa-pencil"></i> Dokumenty</a></li> <li><a href="#"><i class="fa fa-pencil"></i> Povinné zverejňovanie</a></li> <li><a href="#"><i class="fa fa-pencil"></i> História školy</a></li> </ul> </li> <li><a href="#" title="Galéria"><i class="fa fa-picture-o"></i> Galéria</a></li> <li class="roleta"><a href="#" title="Ostatné"><i class="fa fa-user"></i> Ostatné</a> <ul> <li><a href="#"><i class="fa fa-pencil"></i> Aktivity školy</a></li> <li><a href="#"><i class="fa fa-pencil"></i> Dokumenty</a></li> <li><a href="#"><i class="fa fa-pencil"></i> Povinné zverejňovanie</a></li> <li><a href="#"><i class="fa fa-pencil"></i> História školy</a></li> </ul> </li> <li><a href="#" title="Kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li> </ul> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* CSS Document */ body { margin: 0; padding: 0; font-family: sans-serif; } #navigacnemenu { background: #0095C6; min-height: 60px; padding: 0 5%; display: block; overflow: hidden; } #navigacnemenu ul { margin: 0; padding: 0; height: auto; display: block; } #navigacnemenu ul li { display: inline-block; height: 60px; text-align: center; float: left; } #navigacnemenu ul li a { color: #FFFFFF; text-decoration: none; font-weight: bold; line-height: 40px; display: block; padding: 10px 33px; } #navigacnemenu ul li a:hover, #navigacnemenu ul li a.active { background: #00A9E1; } #navigacnemenu ul li.roleta ul { display: none; position: absolute; background: #0095C6; } #navigacnemenu ul li.roleta a:hover ~ ul { display: block; float: none; } #navigacnemenu ul li.roleta ul:hover { display: block; float: none; } /* *********** */ #navigacnemenu ul li.roleta ul li { display: block; float: none; text-align: left; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>