• User

    [Asp Net] Menu dinamico con .css

    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} li{float: right;margin: 0 3px 0 0;padding:0;} a{width: 90px;text-decoration: none;
        text-align:center;text-decoration: none;
        color: white;} a:hover{color: #ADADAD} li#activelink a,#navigation li#activelink a:hover{
        color: #F7D10C}
    
    #navigation1{float:left; margin:0 0 0 0} ul{font: 100% bodoni mt,arial,times new roman,sans-serif;font-size: 10pt;margin: 0;padding: 0;background:#1F56B5} li{margin: 0 0 0;padding: 0} a{display: block;width: 150px;line-height: 20px;text-decoration: none;
        border: 1px solid white;text-indent: 19px;color:white;
        } a:hover{
        color:} li#activelink a,#navigation1 li#activelink a:hover{
        color:}
    
    #navigation2{float:left; margin:0 0} ul{font: 100% bodoni mt,arial,times new roman,sans-serif;font-size: 10pt;margin: 0;padding: 0;background:#F4F4F4} li{margin: 0 0 0;padding: 0;text-align:left;} a{diplay:block;width:121px;line-height: 20px;text-decoration: none;text-indent: 9px;
        color:#1F56B5;
        } a:hover{
        background: url('../images/sfondi/down2.jpg')} 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


  • Moderatore

    Ciao,
    ti ricordo che per regolamento non è consentito inserire di di 15-20 righe di codice per post. Ti consiglio inoltre di indicare un problema specifico e non richiedere una soluzione intera ad un tuo problema complesso, eventualmente cerca nelle sezioni apposite del forum una consulenza 😉

    :ciauz:


  • User

    Mi scuso infinitamente se ho provocato malumori...

    Non avevo letto il regolamento...

    Non capiterà più..

    Io non voglio una soluzione completa al mio problema...

    Ripropongo la questione in modo più specifico...

    Ho una pagina default.aspx in cui vi è un menu verticale formattato con un file .css così formato:

    
    -Otranto
    -Dubai
    -Padenghe
    
    

    Il quale menu fa riferimento ad una pagina prodotti.aspx (che a seconda del prodotto selezionato estrae informazioni specifiche da un database) in cui ad esempio se ho selezionato Otranto vi sarà un menu così composto:

    
    -Otranto
        -Nuccio
        -Domenico
        -Lara
    -Dubai
    -Padenghe
    
    

    e così via...

    Quello che non riesco a implementare è proprio questo. Io ho inserito nella pagina prodotti.aspx tuttlo sviluppo del menu richiamando per ogni voce le regole del file nav.css, ma quando apro la pagina prodotti.aspx relativa al prodotto Otranto il menu appare tutto aperto in questo modo:

    
    -otranto     -Nuccio    -Domenico    -Lara-Dubai    -Prodotto1    -prodotto2    -prodotto3    .    .    .-Padenghe    .    .    .
    ```quindi ecco la mia domanda:Come faccio a nascondere e quindi rendere nuovamente visibili se richiamate le diverse parti del menu?E' questo il mio problema...
    Ho già risolto il problema in html al seguente link:www4.webng.com/parmare/homa.htmPerò in questo caso non ho una sola pagina prodotti (come sto realizzando con asp.net)ma tante pagine quanti essi sono...Aiutatemi vi prego...Anche con piccolissimi consigli...Grazie mille Kite

  • Moderatore

    Ciao,
    controlla che in prodotti.aspx non ci sia qualche altro css (oltre a nav.css) che magari può causare qualche conflitto con le regole specificate in nav.css

    :ciauz:


  • User

    grazie mille...
    proverò a controllare..

    ciao
    A presto
    Kite


  • User

    ciao

    Ho controllato ma nav.css è l'unico foglio di stile presente..

    Comunque ripresento il problema in forma più leggibile e comprensibile..

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

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

    
    -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