casella a discesa come fare ?

[alspam]

Devo realizzare una casella a discesa il cui aspetto e' come quello della immagine allegata.
Che tecniche devo usare ?

[gguida]

se ho capito bene puoi usare una combo box:

<form name="form1" method="post" action="">
    <select name="select">
      <option value="" selected>prima voce</option>
      <option value="">seconda voce</option>
      <option value=""></option>terza voce</option>
    </select>
</form>

dove selected indica il valore iniziale che deve visualizzare, e con value recuperi il valore della selezione....

[alspam]

intendevo aspetto grafico, cmq grazie

[gguida]

se vuoi che qualcuno ti aiuti dovresti spiegarti un pò meglio...

cmq per la grafica, immagino tu voglia lo stesso sfondo stile e dim come in esampio, ti consiglio di crearti delle classi in css in modo da formattare l'aspetto della combo come desideri...
ecco un esempio:

.cmdflat  {
	font-size : 9pt;
	font-family : Verdana;
	background-color : #9999CC;
	color : #ffffff;
	font-weight : bold;
	border-width : thin;
	}

e poi la applichi alla combo:

<form name="form1" method="post" action="">
  nome
    <select name="select" class="cmdflat">
      <option value="" selected>prima voce</option>
      <option value="">seconda voce</option>
      <option value="">terza voce</option>
    </select>
</form>

[alspam]

ok mi scuso se non ero stato chiaro.
Pensandoci bene se le voci sono molte l'elenco si allunga troppo e serve una barra di scorrimento.

Io pensavo di mettere le voci su un layer la cui apparizione/sparizione viene comandata dalla pressione della voce ELEMENTI SINGOLI.

All'interno del layer che si muove mettero' una tabella e gestiro' l'overflow facendo apparire la barra di scorrimento verticale.

Che dite ?

[gguida]

si puoi farlo...ma io personalmente invece di inserire un livello metterei la combo è più semplice, veloce, pulita ...cmq in entrabbi i casi hai la barra verticale pre scorrere le voci...sulla combo quando le voci sno tante appare in automatico...

potresti anche usare js...

cmq dipende anche da cosa sono e cosa fanno queste voci che ti popolano ELEMENTI SINGOLI...

sono voci statiche?
hanno link?
???e altro....

[alspam]

La combo "normale" non puoi formattarla come vuoi.
Le voci le carico da un db.

Ho iniziato con questo codice e penso sia un buon punto di partenza, dacci un'occhio (lo devo migliorare!)

<script>
function toggleList (fs){

choices = fs.getElementsByTagName("div").item(0);

if (choices.className == 'fsHiddenChoices'){
choices.className = 'fsShownChoices';
}
else {
choices.className = 'fsHiddenChoices';
}
}
</script>


<style>

.fsCurrent {
display:block;
border: 2px solid #009966;
width:214PX;
cursor: hand;
}

.fsHiddenChoices {
display:none;
}

.fsShownChoices {
background: #ffffff;
border: 1px solid #009966;
position:absolute;
width:214px;
cursor: hand;
}

.fsShownChoices a{
display:block;
}

</style>



<div class="fauxSelect">

<a class="fsCurrent" onClick="javascript:toggleList(this.parentNode);ev ent.cancelBubble=true;"> - ELEMENTI SINGOLI - </a>


<div class="fsHiddenChoices">
CONTENITORE DELLE VOCI CON EVENTUALE SCROLL
</div>

</div>

[gguida]

così a prima vista..va bene...potresti avere problemi di incompatibilità con alcuni browser..non sono sicuro che funzioni su tutti..per esempio ns non gestisce

cursor:hand;

aggiungici

cursor:pointer;

cmq se voui ti passo uno simile che ho realizzato e testato su tutti i browser, per un menu a tendina....

[alspam]

Ecco fatto:
<script>
function toggleList (fs){

choices = fs.getElementsByTagName("div").item(0);

if (choices.className == 'fsHiddenChoices'){
choices.className = 'fsShownChoices';
}
else {
choices.className = 'fsHiddenChoices';
}
}
</script>


<style>

.fsCurrent {
display:block;
border: 2px solid #836E5D;
width:157px;
cursor: hand;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: center;
background-color: #BBAB9C;
}

.fsHiddenChoices {
display:none;
}

.fsShownChoices {
position:absolute;
width:157px;
height:245px;
cursor: hand;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
background-color: #A89382;
border-top: 0px solid #947D6B;
border-right: 2px solid #947D6B;
border-bottom: 2px solid #947D6B;
border-left: 2px solid #947D6B;
}

.fsShownChoices a{
display:block;
}

</style>



<body bgcolor="#9F8574">

<div id="centro" style="position:absolute; left:270px; width:157px; height:245px; top:117px; z-index:2; visibility: visible; border: 1px none #000000;">

<div class="fauxSelect">
<a class="fsCurrent" onClick="javascript:toggleList(this.parentNode);ev ent.cancelBubble=true;"> ELEMENTI SINGOLI </a>
<div class="fsHiddenChoices">
<table width="148" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td height="5"></td></tr>

<tr>
<td valign="middle">

<div style="width:148px; height:245px; overflow:auto">

campi
campi
campi
campi
campi
campi

campi
campi
campi
campi
campi
campi

campi
campi
campi
campi
campi
campi

campi
campi
campi
campi
campi
campi

</div>



</td>
</tr>
<tr><td height="5"></td></tr>
</table>

</div>
</div>
</div>

[tatiana_s]

Che bello che è questo menù,
non lo avevo mai visto...

Posso utilizzarlo anche nelle pagine asp?

come inserisco i link ad ogni nome?

Lo inserisco come include o devo inserire tutto il codice?

Grazie

ciao ciao