Ciao a tutti..
Ringrazio in anticipo chi volesse aiutarmi con un mio problema di gestione dei menu...
Il mio problema è questo...
Dovrei creare un menu dinamico a seconda del prodotto selezionato...
Ho 2 pagine:
default.aspx
prodotti.aspx
e un file nav.css con il seguente codice:
#navigation ul{font: 100% bodoni mt,arial,times new roman,sans-serif; font-size: 10pt;color:white}
#navigation li{float: right;margin: 0 3px 0 0;padding:0;}
#navigation a{width: 90px;text-decoration: none;
text-align:center;text-decoration: none;
color: white;}
#navigation a:hover{color: #ADADAD}
#navigation li#activelink a,#navigation li#activelink a:hover{
color: #F7D10C}
#navigation1{float:left; margin:0 0 0 0}
#navigation1 ul{font: 100% bodoni mt,arial,times new roman,sans-serif;font-size: 10pt;margin: 0;padding: 0;background:#1F56B5}
#navigation1 li{margin: 0 0 0;padding: 0}
#navigation1 a{display: block;width: 150px;line-height: 20px;text-decoration: none;
border: 1px solid white;text-indent: 19px;color:white;
}
#navigation1 a:hover{
color: #ADADAD}
#navigation1 li#activelink a,#navigation1 li#activelink a:hover{
color: #F7D10C}
#navigation2{float:left; margin:0 0}
#navigation2 ul{font: 100% bodoni mt,arial,times new roman,sans-serif;font-size: 10pt;margin: 0;padding: 0;background:#F4F4F4}
#navigation2 li{margin: 0 0 0;padding: 0;text-align:left;}
#navigation2 a{diplay:block;width:121px;line-height: 20px;text-decoration: none;text-indent: 9px;
color:#1F56B5;
}
#navigation2 a:hover{
background: url('../images/sfondi/down2.jpg')}
#navigation2 li#activelink a,#navigation2 li#activelink a:hover{
background: url('../images/sfondi/down3.jpg')}
Per gestirlo in modo dinamico il menu (ossia che vari a seconda del prodotto che seleziono dal menu verticale presente nella pagina default.aspx) mi è stato consigliato di richiamare il file nav.css nella pagina prodotti.aspx nel seguente modo:
<head>
<link href="stileesterno.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* qui metti le regole di css che devi personalizzare per quel prodotto */
</style>
</head>
fin qui tutto ok...
Il problema che ho è che non so proprio come impostare le regole di css in modo che il menu vari a secondo del prodotto richiesto...
Potete aiutarmi magari con un breve esempio?
In default.aspx faccio riferimento a nav.css in questo modo:
<div id="navigation1">
<ul>
<li><a href="prodotti.aspx?...">Otranto</a></li>
<li><a href="prodotti.aspx?...>Dubai - Dolce Vita</a></li>
<li><a href="prodotti.aspx?...">Dubai - Mag218</a></li>
<li><a href="prodotti.aspx?...">Padenghe</a></li>
<li><a href="prodotti.aspx?...">Monte Carlo</a></li>
<li><a href="prodotti.aspx?...">Mentone</a></li>
</ul>
in pagine prodotti.aspx poi :
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* qui metti le regole di css che devi personalizzare per quel prodotto */
</style>
</head>
.
.
.
<div id="navigation1" style="width: 150px; height: 21px">
<ul>
<li id="activelink"><a>Otranto</a></li></ul></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="21"></td>
</tr>
<tr>
<td valign="top" bgcolor="#0000FF">
<div id="navigation2" style="width: 108px; height: 44px">
<ul>
<li><a href="prodotti.aspx?...">Nuccio</a></li>
<li><a href="prodotti.aspx?...">Domenico</a></li>
<li><a href="prodotti.aspx?...">Lara</a></li>
</ul>
</div>
</td>
<td valign="top" background="../images/sfondi/right.jpg">
<!-- MSCellType="empty" -->
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td height="60"> </td>
</tr>
<tr>
<td colspan="3">
<img border="0" src="../images/sfondi/down1.jpg" width="135" height="12"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="12"></td>
</tr>
<tr>
<td valign="top" colspan="4">
<div id="navigation1" style="width: 150px; height: 21px">
<ul>
<li><a href="prodotti.aspx?...">Dubai - Dolce Vita</a></li>
<li><a href="prodotti.aspx?...">Dubai - Mag218</a></li>
<li><a href="prodotti.aspx?...">Php</a></li>
<li><a href="prodotti.aspx?...">Css</a></li>
</ul>
</div>
</td>
e poi a secondo del sottomenu che scelgo ad esempio Nuccio (o Domenico o Lara, esempio di sottoprodotti)
<div id="navigation1" style="width: 150px; height: 21px">
<ul>
<li id="activelink"><a href="prodotti.aspx?...">Otranto</a></li></ul></div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="21"></td>
</tr>
<tr>
<td valign="top" bgcolor="#0000FF">
<div id="navigation2" style="width: 108px; height: 44px">
<ul>
<li id="activelink"><a> Nuccio</a></li>
<li><a href="prodotti.aspx?...">Domenico</a></li>
<li><a href="prodotti.aspx?...">Lara</a></li>
</ul>
</div>
</td>
<td valign="top" background="../images/sfondi/right.jpg">
<!-- MSCellType="empty" -->
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td height="60"> </td>
</tr>
<tr>
<td colspan="3">
<img border="0" src="../images/sfondi/down1.jpg" width="135" height="12"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="12"></td>
</tr>
<tr>
<td valign="top" colspan="4">
<div id="navigation1" style="width: 150px; height: 21px">
<ul>
<li><a href="prodotti.aspx?...">Dubai - Dolce Vita</a></li>
<li><a href="prodotti.aspx?...">Dubai - Mag218</a></li>
<li><a href="prodotti.aspx?...">Php</a></li>
<li><a href="prodotti.aspx?...">Css</a></li>
</ul>
</div>
</td>
Forse il codice è poco chiaro...
Lo spiego
Apro la pagina default.aspx è ho un menu verticale con le seguenti voci (dove il riferimento al file nav.css è id=navigation1):
-Otranto
-Dubai - Dolce Vita
-Dubai - Mag218
-Padenghe
-Monte Carlo
-Mentone
Cliccando su Otranto si dovrebbe aprire la pagina prodotti.aspx riferita ad Otranto con il menu composto in questo modo :
-Otranto ( id=navigation1 activelink)
-Nuccio (id=navigation2)
-Domenico (id=navigation2)
-Lara (id=navigation2)
-Dubai - Dolce Vita ( id=navigation1 )
-Dubai - Mag218 ( id=navigation1 )
-Padenghe ( id=navigation1 )
-Monte Carlo ( id=navigation1 )
-Mentone ( id=navigation1 )
Cliccando poi su Nuccio il menu nel modo seguente:
-Otranto ( id=navigation1 activelink)
-Nuccio ( id=navigation2 activelink)
-Domenico (id=navigation2)
-Lara (id=navigation2)
-Dubai - Dolce Vita ( id=navigation1 )
-Dubai - Mag218 ( id=navigation1 )
-Padenghe ( id=navigation1 )
-Monte Carlo ( id=navigation1 )
-Mentone ( id=navigation1 )
Data questa situazione, ora la domanda è questa:
Come imposto le regole css nel tag <stile>? ovvero chi mi puoi fare un esempio?
<head>
<link href="stileesterno.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* qui metti le regole di css che devi personalizzare per quel prodotto */
</style>
</head>
Ciao
Kite
Metro Style App per Windows 8 con HTML e Javascript