Potřebujete na své stránky vodorovné menu a nechce se Vám vytvářet vlastní? Vytvořil jsem pro vás zdarma šablonu na jednoduché menu s hover efektem za pomoci UL seznamu. Zdrojový kód je dobře okomentovaný, takže určitě poznáte, co k čemu slouží 🙂
HTML:
<div id="obal"> <div id="menu"> <h2>Navigace:</h2> <ul> <li class="prvni"><a href="prodej.html">Prodej</a></li> <li><a href="sluzby.html">Služby</a></li> <li><a href="cenik.html">Ceník</a></li> <li><a href="onas.html">O nás</a></li> <li class="spodni"><a href="kontakt.html">Kontakt</a></li> </ul> </div> </div>
CSS:
#obal { background: orange; width: 499px; height: 38px; font-family: "Century Gothic", sans-serif; } #menu ul { width: 700px; float: left; /* zajišťuje roztažení pozadí za položky nabídky */ margin: 0; padding: 3px 0; /* mezera mezi okrajem nabídky a okrajem tlačítek */ list-style-type: none; } #menu ul li { float: left; /* zajišťuje vodorovné uspořádání položek nabídky */ border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; margin-left: 5px; } #menu a { display: block; /* odkaz se roztáhne přes celou položku nabídky */ padding: 5px 20px; /* odsazení textu od okraje záložky */ color: red; /* barva textu odkazu */ font-size: 105%; font-weight: bold; text-decoration: none; transition: 0.8s; } #menu a:hover { color: #EDF0EA; background-color: red; transition: 0.3s; } #menu h2 { display: none; /* zrušení vykreslování nadpisu */ }
Ke stažení (pro funkčnost, rozbalte zip do nějaké složky)