Vysouvací menu pomocí CSS
Pokud chcete vytvořit vysouvací menu, můžete to udělat pomocí JavaScriptu. Problém obvykle je v tom, že skript je hodně náročný a třeba i špatně funguje v různých prohlížečích. Zde najdete zdrojový kód vysouvacího menu, které je vytvořené pouze v kombinaci HTML a CSS.
Náhled menu
Náhled menu najdete v samostatném souboru CSS vysouvací menu - náhled.
Zdrojový kód
Nejprve je třeba zavést CSS styl:
.menu {color: #000000; padding: 0; margin: 0; list-style-type: none; display:block} .menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none;} .menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;} .menu a {padding: 2px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(141,135,81); display: block; text-decoration: none; font-weight: bold;} .menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;} .menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;} .menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);} .menu li:hover ul, ul.menu li.hover ul { visibility: visible;} .menu li li {float: none; border: none; padding: 0; margin: 0;}
Skript funguje tak, že v menu je skrytý (visibility: hidden) seznam (ul) s odkazy, po najetí myši na odkaz se vybrané menu zviditelní (visibility: visible). Pokud by byl v prohlížeči nějaký problém s CSS, odkazy se zobrazí pod sebou v seznamu. Zdrojový kód pro menu:
<table> <tr> <td> <ul class="menu"> <li><a href="../html/">HTML</a> <ul> <li><a href="../html/text.php">Textové značky</a></li> <li><a href="../html/seznamy.php">Seznamy</a></li> <li><a href="../html/odkazy.php">Odkazy</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../css/">CSS</a> <ul> <li><a href="../css/border/">border</a></li> <li><a href="../css/margin/">margin</a></li> <li><a href="../css/font/">font</a></li> <li><a href="../css/color/">color</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../php/">PHP</a> <ul> <li><a href="../php/kniha_navstev.php">Kniha návštěv</a></li> <li><a href="../php/generovani-formulare.php">Generování formuláře</a></li> </ul> </li> </ul> </td> </table>
Nemá moc smysl to tu obšírněji komentovat, doporučuji vyzkoušet.
Vyhledávání
Základy
Reference
Vlastnosti
CSS vlastnosti abecedně
- backgroud-position backgroundbackground-attachementbackground-colorbackground-imagebackground-repeatborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottomheightline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmin-heightmin-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topwidth
Poradna
Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.