Menù a tendina 
Author: Luigi Dell'aquilaCiao a tutti
Vorrei creare una pagina con vari articoli, ogni articolo è contenuto in un oggetto testo con un'ancora per richiamare l'articolo da un menù a discesa.
primo = nome dell'ancora del primo documento
secondo = nome dell'ancora del secondo documento
Il codice del menù a tendina
<form name="box_1" action=" ">
<select name="menu" onchange="window.open(box_1.menu.options[menu.selectedIndex].value,'menu_la')">
<option value="0">Scegli la buona notizia o scorri la pagina per tutte</option>
<option value="#primo" >primo</option>
<option value="#secondo" >secondo</option>
</select>
</form>
Il menu funziona soltanto che se clicco sulla prima voce "scegli la buona notizia..." mi apre una pagina con errore.
Poi come posso fissare in alto sempre visibile il menù a tendina?
Grazie
http://www.luigidellaquila.altervista.org/prove_ws/menu-a-discesa.html
Author
Dimenticavo è possibile aumentare la dimensione del carattere del menù a tendina?
Grazie
1-Nella prima option togli lo 0 e lascia il campo vuoto, dovrebbe funzionare
2-Sempre in alto, cosa intendi, nell'header?
Cmq devi provare con gli style dandogli position relative o absolute e poi lo sposti posizionadolo con top e left
Author
Un copia incolla nella stickybar ed hai risolto
Author
La stickybar si può configurare al passo 2 e quindi è la stessa per tutte le pagine del sito. Se faccio copia e incolla del codice, dopo il menù a tendina appare in tutte le pagine
Dagli una classe css con
.fx {
position: fixed
}
... da quel che vedo del tuo codice secondo me non può funzionare o funzionerebbe male, in quanto corrisponderebbe a azione involontaria, per esempio tipo PopUp...
...
... puoi provare con il mio storico select per Ancore, con azione volontaria, e che puoi sistemare dove vuoi tu:
<select style="position:fixed;top:100px;left:100px" onchange="location = this.value;">
<option value="#" > seleziona opzione ↓ </option>
<option value="#top" > Top ▲ </option>
<option value="#primo" > primo </option>
<option value="#secondo">secondo</option>
</select>
.
... a seconda della tua struttura eventualmente gli aggiungi anche il livello z-index (!)
... se preferisci, puoi mettere il select in HEADER e nella StickyBar, disbilitandola nelle pagine dove non deve apparire, assegnando però un ID e con il: display:none
ciao
.
Author
Ho provato con il tuo storico select è va meglio, però alle risoluzioni più basse una volta scelto un documento il menù non è cliccabile.
E' possibile tenerlo al centro a tutte le risoluzioni? Come posso fare per evidenziarlo di più ad esempio dandogli un colore oppure aumentandone le dimensioni?
Grazie
... il mio precedente codice era già ingrandito...
... se lo metti nella StickyBar, togli position:fixed e coordinate top left ... così rimarrà dove lo metti; ... e per più opzioni di colori prova così:
<select style="font-size:24px; color:red;background-color:yellow;" onchange="location = this.value;"> ecc.ecc. ... ... .. .. . . .
.
Author
Ora si vede bene, grazie.
Nella stickybar non è una buona idea perchè dopo c'è il menù a tendina anche nelle altre pagine.
C'è la possibilità di centrarlo?
Poi c'è sempre il solito problema che alle risoluzioni più basse quando si sovrappone al testo dei documenti il menù non è più cliccabile. Ho inserito anche z-index:3, ma non ho risolto.
... prova con questo codice che potrai personalizzare:
<!-- per sezione ESPERTO | 3^ opzione (/HEAD) -->
<style>
#primo, #secondo {position:relative; top:-120px}
</style>
-----------------------
<!-- per sezione ESPERTO | 5^ (o 6^) opzione (interno BODY) (*) -->
<div style="position:fixed;text-align:center;width:100%;top:100px;background-color:navy;z-index:10000">
<select style="font-size:24px;color:red;background-color:yellow;" onchange="location = this.value;">
<option value=" " > seleziona opzione ↓ </option>
<option value="#top" > Top ▲ </option>
<option value="#primo" > primo </option>
<option value="#secondo">secondo</option>
</select>
</div>
-----------------
(*) ... oppure in Oggetto Codice HTML esteso per tutta la riga...
.
Author
Ho provato e in anteprima funziona, ma online no. Ho controllato con vari browser, ma non funziona.
... vedo che invece funziona, ma hai mal posizionato le Ancore, non attigue/sovrastanti alla sezione di interessate...
Author
Le ho inserite prima della chiusura del tag Head (3° posizione)
Author
Mi sono espresso male, volevo dire che non trova le ancore invece in anteprima è tutto ok
.. è quello che ho rilevato in rete e detto prima: "hai mal posizionato le Ancore, non attigue/sovrastanti alla sezione di interessate"...
... se in Anteprima è regolare, aziona Ctrl+Anteprima, controlla, e poi esportazione completa...
Author
Ora funziona, ma ho dovuto eliminare
<!-- per sezione ESPERTO | 3^ opzione (/HEAD) -->
<style>
#primo, #secondo {position:relative; top:-120px}
</style>
Author
Grazie KolAsim, ora apro un altro post perchè vorrei fissare in alto il menù.