Creare un sotto menù a discesa - dropdown

Può succedere di voler creare un elenco di diversi link in un menù a discesa che occupi poco spazio nella pagina e che sia sufficiente cliccare su una riga per andare sulla pagina richiesta, in altre parole questo (in termini tecnici si chiama dropdown) :



Elenco di voci, a discesa, con un menù a tendina. E' alquanto semplice da realizzare se si possiedono due nozioni html. Il codice da copiare all'interno del vostro sito nella sezione html è il seguente:


<select onchange="self.location.href=this.value;">
   <optgroup label="Indice 1">
      <option value="
         URL-HERE
      ">
         NAME-HERE
      </option>
   </optgroup>
   <optgroup label="Indice 2">
      <option value="
         URL-HERE
      ">
         NAME-HERE
      </option>
   </optgroup>
</select>
Che si presenta in questa maniera, come si può vedere non ho inserito nessun collegamento a nessuno link.


Per far capire meglio come funziona, ho colorato i parametri da impostare con diversi colori:

  • Indice 1/Indice 2 serve per mettere un sottoindice principale
  • URL-HERE dove inserire il link alla pagina che si interessa collegare
  • NAME-HERE è dove inserire il testo che si vuole far apparire

IMPOSTARE

Questo tipo di elemento autoregola la sua larghezza in base alla scritta più lunga. Per regolare la larghezza in maniera manuale si deve inserire il parametro: style="width: 50px;" così:

<select  onchange="self.location.href=this.value;" style="width: 50px;">
   <option value="kg">Canguro</option>
   <option value="gm">Rinoceronte</option>
   <option value="pound">Assicurazione</option>
   <option value="MetricTon">Metric ton</option>
   <option value="litre">Mutuo</option>
   <option value="ounce">Ounce</option>
</select>

Che appare così:



Stessa cosa per l'altezza che si può regolare. Questo codice fa vedere tutto il testo del primo valore in automatico, per questo si decide di ridurne la larghezza, ma il testo va a capo da solo, cosa non proprio bellissima. Per questo c'è la soluzione, cioè regolare anche l'altezza:

<select  onchange="self.location.href=this.value;" style="width: 50px;  height: 18px">
   <option value="kg">Canguro</option>
   <option value="gm">Rinoceronte</option>
   <option value="pound">Assicurazione</option>
   <option value="MetricTon">Metric ton</option>
   <option value="litre">Mutuo</option>
   <option value="ounce">Ounce</option>
</select>

Che appare così (ca sono le prime due lettere di canguro citazione necessaria ):



Blogger e Adsense

Related Posts Plugin for WordPress, Blogger...