Menù a tendina

di
Fab996
il
3 risposte
F
Fab996
Pochi posts
Iscritto da
feb, 2016
Messaggi:
21

Menù a tendina

Ho un menù a tendina che mostra:mela, pera, banana. A fianco di esso vi è una scritta Prezzo:, la quale deve mostrare il prezzo del frutto che viene cliccato. Come posso far sì che quando l'utente da questo menù seleziona per esempio banana esca la scritta 20, mentre quando clicca pera esca la scritta 60?

3 Risposte

  • D
    Della
    Molto attivo
    Iscritto da
    nov, 2010
    Messaggi:
    1305

    Re: Menù a tendina

    Ciao, purtroppo utilizzando il solo HTML+CSS non è possibile, o almeno non è facile.
    La scelta migliore secondo me è quella di usare JavaScript, andando a modificare il prezzo in base a quanto selezionato
  • Toki
    Toki
    Moderatore
    Iscritto da
    gen, 2001
    Messaggi:
    3879

    Re: Menù a tendina

    Come ti suggerisce Della il CSS non basta.

    Ti ho scritto qui il codice per la selezione: 
    <!DOCTYPE html>
<html>
<body>

<p>Seleziona dalla lista.</p>

<select id="slcFruits" onchange="printValue(this.value)">
  <option value="Mela">Mela
  <option value="Pera">Pera
  <option value="Banana">Banana
</select>

<script>
function printValue(myVal) {
    document.getElementById("selectedValue").innerHTML = myVal;
}
</script>

<div id="selectedValue"></div>

</body>
</html>
  • S
    samu
    Pochi posts
    Iscritto da
    nov, 2016
    Messaggi:
    6

    Re: Menù a tendina

    Secondo me è meglio usare CSS se possibile:
    HTML 
    
<div id="mostra-menu">
<span>Puntami sopra per il menu</span>
  <ul id="menu-a-tendina">
    <li>Primo elemento</li>
    <li>Secondo elemento</li>
    <li>Terzo elemento</li>
  </ul>
</div>
    CSS 
    
li {
  background-color: #cee1ff;
  padding: 8px;
  list-style-type: none;
  max-width: 200px;
}

  li:hover {
    background-color: #aacbff;
  }
  
#menu-a-tendina {
    display: none;
    margin: 0px;
}

#mostra-menu:hover #menu-a-tendina {
  display: block;
}
    Visita questo link per vederlo "in azione"
Devi accedere o registrarti per scrivere nel forum
3 risposte