Ciao, sono molti i tutorial e gli esempi online, come puoi vedere tu stesso facendo una ricerca con "css menu tutorial". Poi bisognerebbe andarsi a cercare quello che fa al caso tuo.
Ti do una base di partenza, usando, come si suole, un elenco per il menu. Le immagini potrebbero essere inserite con un rollover direttamente nell'html attraverso javascript oppure, come nel mio codice, come sfondi diversi del link sullo stato hover e su quello normale.
Il codice:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
/* annulliamo margini e padding su tutti gli elementi perché quelli di default differiscono fra i vari browser */
* {
margin:0;
padding:0;
}
#menu {
list-style-type:none; /*eliminiamo il punto elenco*/
height:30px;/*altezza eguale a quella dei link, con l'overflow sotto serve a interrompere il float dopo l'elenco*/
overflow:hidden;
}
#menu li{
float:left; /*affianchiamo le voci elenco*/
}
#menu a{
display:block;/*ci serve perché daremo dimensioni precise ai link*/
width:100px;
height:30px;/*altezza e larghezza vanno impostate in base alle dimensioni delle immagini di sfondo*/
background-image:url(miaImmagineNormale.jpg);
}
#menu a:hover{
background-image:url(miaImmagineHover.jpg);
}
-->
</style>
</head>
<body>
<ul id="menu">[*]link1[*]link2[*]link3[*]link4[/list]
</body>
</html>
nell'esempio lo sfondo è eguale per tutti i link.
Dovessi avere sfondi diversi per ciascuno di essi potrei aggiungere altre regole:
codice:
#menu a#uno{
background-image:url(altramiaImmagineNormale.jpg);
}
#menu a#uno:hover{
background-image:url(altramiaImmagineHover.jpg);
}
#menu a#due{
background-image:url(altramiaImmagineNormale2.jpg);
}
#menu a#due:hover{
background-image:url(altramiaImmagineHover2.jpg);
}
ulteriori modifiche possono poi essere apportate, quali stabilire una larghezza per il menu, centrarlo, eccetera
Permessi di invio
Rispondi quotando