fascia
Molla & Colla
Layout
Molla & Colla
Layout
inizio pagina

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.

D
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.

layer principale che contiene il link che apre il pannello coi link e il pannello
Link fittizio che apre il pannello che sta sotto sullo hover passando da absolute a relative

pannello che contiene i link del men¨

un link un altro

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¨:

layer principale che contiene il link che apre il pannello coi link e il pannello
Link fittizio che apre il pannello che sta sotto sullo hover passando da absolute a relative chiudi

pannello che contiene i link del men¨

un link un altro

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

Apre men¨ chiudi

pannello che contiene i link del men¨

un link un altro
Apre men¨

pannello che contiene i link del men¨

un link un altro

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.

Metto qualche bollino allora va.
Valid XHTML 1.1! Valid CSS!
Lunedý 20 settembre 2004
Jerry Masslo di mondoquarto.org
all'inizio