Nina
Menù a tendina con soli CSS
+ position:fixed
cross-browser
(cioè anche i browser monopolio mettono giudizio)
Era certo che nei browser monopolio non si potessero realizzare menù a tendina con soli css. Quei browser, a differenza di altri con un supporto migliore dei css come Mozilla e Opera, accettano lo hover solo sui link e ciò lasciava pensare che per un menù a tendina con soli css ci fosse ben poco da fare.
Avevo appena risposto qualcosa del genere a un quesito sul forum di html.itquando mi balena un'idea che ha portato a un primo tentativo di menù che anche se non soddisfacente però lasciava intravedere che in realtà qualcosa si poteva fare e infatti, poco dopo ho messo online altre due versioni sullo stesso tema l'ultima delle quali, anche se bisognosa di messa a punto di fatto dimostrava la possibilità di un menù a tendina con soli css buono anche per i browser monopolio.
Qui c'è uno sviluppo di quel menù che ne risolve i problemi e dove rinuncio alla stessa impostazione per i browser standard perché ritengo concettualmente non corretto che si ricorra a un artificio su browser che consentono quel tipo di menù usando del normalissimo codice css, così qui il codice è differenziato per i diversi browser facendo largo uso di !important che non essendo letto dai browser monopolio si può usare come sniffer per servire codice diverso, inoltre, nei i browser standard hanno un comporatamento diverso che ne rende più difficile l'utilizzo e ciò risolve la questione
Discorso analogo al menù a tendina con soli css si può fare per il position:fixed, valore della proprietà position che permette di fissare un elemento nella pagina e quelli annidati in esso, ossia allo scorrere della pagina queli elementi restano al loro posto.
Anche in questo caso i browser monopolio non leggono quel valore che interpretano solo per lo sfondo e quindi per la proprietà background e solo per il body mentre i browser di cui a sinistra e altri non hanno difficoltà a interpretarlo correttamente.
Stessa storia pure con una risposta al forum che ne escludeva la possibilità e succesiva realizzazione di una pagina che la smentiva in cui più elementi vengono fissati.
A differenza del menù però l'idea non sembra essere originale in quanto in rete ho poi trovato altre pagine che spiegano come implementare il position: fixed sui browser monopolio penso precedenti alla mia, tuttavia le strade non sembrano coincidere e in ogni caso melius abundare.
Come per il menù anche per il position:fixed ricorro a !important per servire codice diverso alle due tipologie di browser prese in considerazione.
In questa pagina il menù a tendina è in position: fixed perché dovevo realizzare delle pagine con una testata fissa e anzi avrei pronto da tempo molto materiale che però ho poi un po' abbandonato per l'indecisione sulla scelta dei vari layout che andavo realizzando e inoltre avevo qualche dubbio che il menù potesse coesistere col fixed, così invece di fare un menù, un fixed e un menù più fixed fondo direttamente le soluzioni e risparmio qualche pagina e parecchie ore.
Il codice è testato sui browser standard con doctype che li portano in standard mode e sulla versione 6 del browser monopolio in quirk mode come le precedenti, esattamente è xhtml 1.1 e uso un semplice commento html in cima alla pagina per portare anche la 6 monopolio in quirk, hack casuale che ho trovato e che normalmente uso per conservare il doctype e avere tutti i monopolio in quirk, dello pseudo-standard della 6 monopolio preferisco farne a meno, l'hack stesso dimostra i suoi limiti.
i
l
a
t
o
» D
i
l
a
t
o
» X
Altro esempio di pannello che si apre da link, questa volta il pannello scorre da sinistra verso destra
È una variante del menù superiore che si può ottenere assegnando al pannello un float:left e lo stesso al link che lo spinge (per i browser monopolio, per gli standard vale sempre lo hover sul div) quando passa da absolute a relative sullo hover. C'è qualche complicazione coi browser standard se si vuole rendere il pannello fisso anziché farlo scomparire quando si allonta il mouse, quei browser non lasciano persistere il menù, in questo caso il pannello non scompare se si mantiene il mouse dentro certi confini che si possono estendere anche a tutta la pagina ma non trovo modo per evitare che scompaia quando il mouse fuoriesce dalla pagina e con mozilla anche usando la rotellina del mouse.
Anche nei pannelli laterali si possono mettere tutti i link che si vogliono
il link non porta a niente
L'artifizio che permette di aprire da un link un pannello che ne contiene altri, realizzando così un classico menù a tendina con soli css.
Occorre predisporre un link anche fittizio cui si assegna un display:block, di grandezza uguale o maggiore del pannello dei link che si vuole aprire, link e pannello si posizionano su un layer e al link si dà un position:absolute in modo da coprire il pannello da aprire, si può poi lasciare visibile solo una parte del layer e quindi del link, altrimenti non ci sarebbero i vantaggi di guadagno di spazio che danno questi menù. Tutto ciò che occorre è poi dare allo hover sul link un position:relative, in questo modo il link non coprirà più il pannello ma prenderà il suo posto nel layer e di consenguenza spingerà in basso il pannello. Cercherò ora di inserire qui una dimostrazione la più esplicativa possibile.
Si nota una differenza fondamentale tra i browser, sia i monopolio che gli standard aprono il pannello ma mentre gli standard lo richiudono allontanando il mouse dal link i monopolio lo lasciano dov'é! Per gli standard quindi sembra più conveniente oltre che più corretto non ricorrere a questo artificio ma affidarsi a un normale hover su un div mentre per i monopolio semplifica la gestione del menù, infatti, non c'è il problema di tenere aperto il pannello, il problema ora è chiuderlo.
Per richiuderlo si può ricorrere a un altro link posizionato prima del pannello che si apre e sullo hover gli si indica di spostarsi in alto, ciò costringe l'intero pannello a seguirlo e quindi a richiudersi, tutto sembra dipendere dal fatto che i browser monopolio reimpostano gli elementi sulla pagina se un hover apporta modifiche ma si scordano rimetterli a posto quando lo hover non agisce più, sic! Sembra anche che sia sufficiente spostare solo di poco il link di chiusura perché una volta che il link di apertura è nello stato iniziale di position: absolute il link di chiusura ritornerà alla sua posizione iniziale trascinandosi dietro il pannello.
Ed ecco come diventa il menù:
A questo punto si può formattare il link di chiusura come si vuole e occorre poi rivedere le dimensioni di tutto per tenere conto dello spazio che occupa, poi si può procedere a nascondere la parte del menù che non si vuole visualizzare e inoltre, modificare il link di apertura altrimenti il testo rimarrà in alto e non sarà visualizzato se si nasconde parte del menù.
Assegno allora a questo paragrafo un position:relative con un z-index superiore al menù che nasconderò per la gran parte sotto di esso, aggiusterò le dimensioni e inserirò il testo del link di apertura in un tag span cui assegnerò un position: absolute e un bottom: 0, a destra invece inserisco lo stesso menù con un diverso codice per funzionare sui browser standard
Il menù di sinistra è quello buono per i browser monopolio mentre quello di destra è per i browser standard, il menù viene mostrato perché al pannello è dato un display:none che lo nasconde e poi un .layer3Moz:hover .pannello3Moz {display:block} (scusate i nomi :) ) che mostra il pannello originariamente nascosto al passaggio del mouse su un'area qualunque del layer
Ora non resta che combinare i due menù in uno solo e ricorrendo a !important per servire il codice utile ai diversi browser e conviene partire dal menù per i monopolio e adattarlo per gli standard.
Mi accorgo però che è ancora più semplice e bastano poche modifiche al menù per i browser monopolio per averlo buono anche per gli standard, e quello sopra è già adattato, è un sistema diverso da quello del menù in alto a questa pagina, ora è usato lo stesso artificio anche per i browser standard per far scendere il pannello, e al passaggio del mouse è mantenuto al suo posto con un .pannello:hover {margin-top:11em}.
Mi sto contraddicendo su quanto affermato a inizio pagina però considerazioni sulla maggiore semplicità mi portano a preferirlo, inoltre, in questo modo non sono necessari calcoli particolari per assegnare le giuste altezze, basta che l'altezza del link che apre sia sempre maggiore del pannello e si può pure esagerare, tanto la parte eccedente rimarrà nascosta.
Per cui non mi resta che aggiungere il codice commentato:
/*il layer che contiene tutto l'occorrente al menù*/ .layer3 {width:40%; margin-left:1%; background:#e2726b; color:white; position:absolute; top:-11em; /*sposta tutto il menù in alto per nasconderlo sotto un altro elemento*/ } /*il pannello che contiene i link del menù*/ .pannello3 { width:100%; background:#e2726b; padding-bottom:1em } /*il link che copre tutto il menù*/ .chiave3 {position:absolute; top:0; left:0; background:#d11465; color:white; display:block; width:100%; height:12em; /*l'altezza è maggiore dello spostamento in alto del layer per consentirne la visualizzazione di una parte*/ text-decoration:none } /*il testo del link che apre il pannello è racchiuso da questo span per posizionarlo in basso, altrimenti lo spostamento in alto del layer, per nascondere la gran parte del menù sotto un elemento precedente, lo occulterebbe*/ a.chiave3 span {position:absolute; bottom:0; } a.chiave3:hover {position:relative; /*sullo hover il link passa dallo absolute iniziale a relative, per cui occuperà spazio nel layer e spingerà in basso gli elementi a esso successivi nello html*/ background:#f4a460 } /*codice per i browser standard che al passaggio del mouse sul pannello lo mantengono nella posizione raggiunta dopo lo spostamento che dovrà avere il margin-top uguale all'altezza del link che apre il menù */ .pannello3:hover {margin-top:12em} .pannello3 a {color:#fadf95} /*il link che serve a chiudere il pannello necessario solo ai browser monopolio che altrimenti lo lascerebbero aperto*/ .linkChiusura3 { display:none!important; /*con l'important si istruiscono i browser standard di non visualizzare questo link a loro non necessario, i browser monopolio non leggeranno l'operatore !important e sovrascriveranno l'indicazione con la successiva*/ display:block; width:30%; border:1px solid white; background:#20c175; color:white } /*il link di chiusura, basta dargli un margin che lo sposta dalla sua posizione attuale per chiudere tutto il menù coi browser monopolio*/ a.linkChiusura3:hover {margin-top:12.5em}
E questo è il semplice codice html:
<div class="layer3"> <a class="chiave3" href="#"><span>Apre menù</span></a> <a class="linkChiusura3" href="#">chiudi</a> <div class="pannello3"> <p>pannello che contiene i link del menù</p> <a href="#">un link</a> <a href="#">un altro</a> </div> </div>
Per il menù in alto ho provato a usare questo nuovo metodo ma inconvenienti marginali con Mozilla, come strane linee inspiegabili, mi hanno convinto a ripristinare quello vecchio anche se un po' riveduto.
In ogni caso il meccanismo fondamentale è quello del link che passa da abolute a relative, tutto il resto può essere modificato alla bisogna
Cross-browser, test della pagina.
Su Mozilla Firefox e Firebird, Opera7 e i browser monopolio dalla 5 in poi non sembrano esserci particolari problemi, però Opera7 non annida un absolute dentro un fixed e ciò ha comportato qualche modifica al menù in alto della pagina e fa intravedere dei limiti nell'uso congiunto di quel menù col fixed.
Riscontro una sovrapposizione nell'ultimo esempio colla 5 dei monopolio, e non mi pare il caso di rimediare.
Disastro totale invece con Opera6, non riconosce il fixed ma non apre nemmeno un menù di tutti gli esempi, il browser oltre che datato mostra parecchi limiti nel supporto dei css e non ritengo necessario tenerlo in considerazione come i Netscape vecchi.
Per ora i test si limitano all'os monopolio, successivamente farò qualche prova anche su altri os.
Questioni varie
Si può fare qualcosa se si vuole che il menù scompaia coi browser monopolio quando il mouse va fuori da esso, però il fixed complica un po' tutto e allora appena ho tempo proverò ad aggiustare la prova che ho fatto togliendolo, anche se non ho idea si possano risolvere tutti i problemi.
Sembra una questione di poco conto però possono diventare fastidiosi dei menù che si aprono senza volerlo e che poi si devono andare a richiudere.
La situazione è dunque che con i monopolio è complicato far chiudere il menù senza passare dal pulsante di chiusura mentre al contrario cogli standard lo è farlo restare aperto.
La posizione attuale del menù in alto dipende dal fatto di dover fare una pagina con un fixed lì ma la posizione più indicata sembra essere su uno dei lati o su entrambi, questo perché normalmente i monitor hanno spazio inutilizzato in larghezza, anche perchè pagine troppo larghe sono di lettura meno agevole se non organizzate in colonne.
Dovrei pure illustrare il position fixed ma la pagina è anche già troppo lunga e quindi successivamente ne farò un'altra solo per il fixed, o meglio: ne farò un'altra anche per il fixed?
Un po' mi ha stufato sto fixed
Come si evince dal primo menù ho preparato un Home per raccoglire i link a tutto il materiale che ha a che fare col fixed o coi menù a tendina con soli css o con entrambi, è quindi solo una raccolta di link.
Nina è il nome di questa pagina, mi serviva darne uno e siccome Molla & Colla va alla home di cui sopra ho dovuto trovare un altro nome, a me piace, poi son gusti.
