Menu dinamico con file .css

  • Creatore Discussione Creatore Discussione kitemm
  • Data di inizio Data di inizio

kitemm

Nuovo Utente
16 Mag 2007
8
0
0
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:

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:

Codice:
<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:

Codice:
<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 :

Codice:
<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)

Codice:
<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):

Codice:
-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 :

Codice:
-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:

Codice:
-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?

Codice:
<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
 
ciao a tutti...

scusate se quello che ho scritto in precedenza forse è illegibile e lungo...

Semplifico il problema...

Ho 2 pagine default.aspx e prodotti.aspx e un file .css
All'interno di default.aspx ho un menu verticale (formattatato tramite nav.css) di questo tipo:

Codice:
-Otranto
-Dubai
-Padenghe
e fin qui nessun problema visto che il menu è fisso.

Le voci di tale menu fanno tutte riferimento a alla pagina prodotti.aspx che genera un layout diverso a seconda del prodotto selezionato...

Ad esempio se clicco su Otranto il menu in prodotti.aspx dovrebbe essere:

Codice:
-Otranto
    -Nuccio
    -Domenico
    -Lara
-Dubai
-Padenghe

Anche tale menu prende la formattazione specifica dal file nav.css..
e cosi via uguale per Dubai e Padenghe...

In html questo mi è stato abbastanza semplice realizzarlo, con l'handicap però che ad ogni link (Otranto, Dubai, Padenghe..) corrisponde una pagina ad-hoc creata e quindi statica...

L'esempio è presente al link:

www4.webng.com/parmare/home.htm

Come faccio a realizzare questo con asp.net in una sola pagina che nel mio caso è prodotti.aspx?
E' possibile?

Mi potete aiutare per favore?sto combattendo da un po' di tempo con questo problema e non riesco a venirne a capo...

Confido in voi esperti ...

Grazie mille

Kite
 

Discussioni simili