secondo esempio di menu verticale creato con i css
autore:
Stu Nicholls
trovato nel suo sito come example menu fifteen (esempio di menu quindici); li ho messi in list (<ul> <li>) per rendere i links rispettosi della accessibilità (quando diversi links sono vicini fra loro vanno separati in questo modo)
Quali browsers lo supportano
Windows:
IE 6.0 - Netscape 7.1 - Mozilla 1.4 - Opera 7.11
Macintosh:
IE 6.0 - Netscape 7.0 - Mozilla 1.4 - Opera 6.0
come si usa:
<ul>
<li><a class="button" href="#nogo" title="" >link uno</a></li>
<li><a class="button" href="#nogo" title="" >link due</a></li>
<li><a class="button" href="#nogo" title="" >link tre</a></li>
<li><a class="button" href="#nogo" title="" >link quattro</a></li>
<li><a class="button" href="#nogo" title="" >link cinque</a></li>
</ul>
</div>
#menu {position: relative; margin-top: 20px; left: 5px; display: block; width: 350px;}
#menu a.button, #menu a.button:visited {display: block; width: 150px; height: 30px; background: url(/immagini buttons.gif); background-position: top left; background-color: transparent; text-align: center; color: #000; line-height: 28px; text-decoration: none; font-family: arial, sans-serif; font-weight: bold; margin-top: 5px;}
#menu a.button:hover {background-position: 0 -30px; line-height: 31px; overflow: hidden;}
#menu a.button:active {background-position: 0 -60px;}
se lo mettete direttamente sulla vostra pagina lo si mette fra nella pagina Html o Xhtml
<ul>
<li><a class="button" href="#nogo" title="" >link uno</a></li>
<li><a class="button" href="#nogo" title="" >link due</a></li>
<li><a class="button" href="#nogo" title="" >link tre</a></li>
<li><a class="button" href="#nogo" title="" >link quattro</a></li>
<li><a class="button" href="#nogo" title="" >link cinque</a></li>
</ul>
</div>
nel css
#menu {position: relative; margin-top: 20px; left: 5px; display: block; width: 350px;}
#menu a.button, #menu a.button:visited {display: block; width: 150px; height: 30px; background: url(/immagini buttons.gif); background-position: top left; background-color: transparent; text-align: center; color: #000; line-height: 28px; text-decoration: none; font-family: arial, sans-serif; font-weight: bold; margin-top: 5px;}
#menu a.button:hover {background-position: 0 -30px; line-height: 31px; overflow: hidden;}
#menu a.button:active {background-position: 0 -60px;}
head e /head e lo dovrete incapsulare fra:<style type="text/css">
e
</style>
Questa immagine, di cui fa uso il foglio di stile, contiene i tre momenti del bottone (link, hover e active) e va messa nel vostro cassetto immagini.
