Menu dinamico con css
Vediamo insieme come creare un menu orizzontale con rollover in css.
Per chi non lo sapesse css sta per content system stylesheet ed è il linguaggio che dà lo stile al web,
è un linguaggio integrabile con l’html.
Creiamo una pagina html qualsiasi:
<html>
<head>
<style type=”text/css”>
#menu
{ width:650; margin:auto; height:25px; color:inherit; font-size:9pt; background-image: url(barra.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; clear:both; }.menu
{ width:150px; height:20px; float:left; font-family: Tahoma,sans-serif;
text-align:center; text-transform:uppercase; }.menu a:link, .menu a:visited, .menu a:active
{ text-decoration: none; color:#fff; display:block; height:17px; padding-top:8px; font-weight:bold; font-size:7pt; background-color: transparent; background-image: inherit; background-repeat: inherit; background-attachment: inherit; background-position: inherit; }.menu a:hover
{ color: white; text-decoration:none; background-image: url(roll.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }</style>
</head>
<body>
<div id=”menu”>
<div class=”menu”><a href=”link1.html”>Link 1</a></div>
<div class=”menu”><a href=”link2.html”>Link 2</a></div>
<div class=”menu”><a href=”link3.html”>Link 3</a></div>
</div>
</div></body
</html>
Tra i tag stile notiamo il codice css,
per usarlo notiamo il codice tra i tag body che è il corpo fisico del nostro menu.
Adesso salvatevi sul vostro pc le immagini sottostanti e caricatele nel vostro spazio web:
Ps.Le immagini sono protette da copyright, sono state realizzate da ryanwolf ma potete tranquillamente utilizzarle nel vostro sito.