Ciao a tutti, ho un quesito che può interessare diverse persone.
Partendo da una pagina asp che carica dentro di se contenuti differenti, a seconda delle variabili passate dai menu, quindi
un solo body !!! vorrei sostituire il menu presente ora (classico)
con un menu fatto con un'unica immagine per i tre stati che variano
tramite css .
Sotto ho indicato il link di riferimento
codice:
http://pro.html.it/articoli/id_515/idcat_8/pro.html
Mi è stato suggerito di fare quanto segue:
Certo che si può evidenziare la voce attiva del menù con un' altro sistema:
basta assegnare un id="activelink" al link dentro l'[*], come per esempio
nei primi tre articoli sui menù e quello sui tab css.
L' html diventerà:
<div id="nav">
<ul>
<li id="prodotti">
prodotti
[/list]
</div>
Bisogna poi cambiare i selettori delle regole per lo stato attivo in qualcosa
del tipo:
li#prodotti a#activelink{ /*dichiarazioni per lo stato attivo*/}
Ora vorrei capire più nello specifico come si può modificare il listato seguente, per adattarlo ad un menu costruito con una logica
che ho indicato a seguito del seguente listato
codice:
<style type="text/css">
body{background: #FFF}
div#nav{margin: 50px 0 0 50px}
div#nav ul{width: 450px;height: 30px;overflow: hidden;list-style-type: none;margin: 0;padding: 0; background:url(images/h-matrix.jpg) no-repeat 0 -30px}
div#nav li{margin: 0;padding: 0}
div#nav li,div#nav a{float: left;width: 90px;height: 30px}
div#nav a{text-indent: -9000px;text-decoration: none;padding: 30px 0 0 0; overflow: hidden; height: 0px !important; height /**/:30px; background-image: url(images/h-matrix.jpg)}
li#mhome a{background-position: 0px 0px}
li#mhome a:hover{background-position: 0 -30px}
body#home li#mhome a{background-position: 0 -60px}
li#mprod a{background-position: -90px 0px}
li#mprod a:hover{background-position: -90px -30px}
body#prod li#mprod a{background-position: -90px -60px}
li#mserv a{background-position: -180px 0px}
li#mserv a:hover{background-position: -180px -30px}
body#serv li#mserv a{background-position: -180px -60px}
li#mport a{background-position: -270px 0px}
li#mport a:hover{background-position: -270px -30px}
body#port li#mport a{background-position: -270px -60px}
li#mcont a{background-position: -360px 0px}
li#mcont a:hover{background-position: -360px -30px}
body#cont li#mcont a{background-position: -360px -60px}
</style>
</head>
<body id="prod">
<div id="nav">
<ul>
<li id="mhome">Home
<li id="mprod">Prodotti
<li id="mserv">Servizi
<li id="mport">Portfolio
<li id="mcont">Contatti[/list]
Schema attuale della pulsantiera
Rispondi quotando