| Precedente :: Successivo |
| Autore |
Messaggio |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
 Inviato: 22 Ott 2005 01:54 Oggetto: * [tutorial] menu con effetto onmouseover senza javascript |
 |
|
costruiamo un menu con effetto onmouseover, usando solo il css
il codice e' il seguente:
| Codice: |
<html>
<head>
<title>Menu</title>
<style>
#menu {
font-family: verdana, arial, sans-serif;
}
#menu ul {
width: 200px;
list-style: none;
margin: 0px;
padding: 0px;
background: #FF8C1B;
border: 3px outset #c0c0c0;
}
#menu li {
border: 1px solid #FF8C1B;
}
#menu a {
color: #000;
display: block;
height: 24px;
background: #FF8C1B url(butterup.gif) no-repeat center left;
padding-left: 32px;
padding-right: 32px;
text-decoration: none;
font-weight: bold;
}
#menu a:hover {
color: #FF8C1B;
background: #000 url(butterdown.gif) no-repeat center right;
text-align: right;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">chi sono</a></li>
<li><a href="#">cosa faccio</a></li>
<li><a href="#">tempo libero</a></li>
<li><a href="#">contatti</a></li>
</ul>
</div>
</body>
</html>
|
le immagini usate sono queste:
nota: la pagina non contiene nient'altro che il menu percio' ho optato per un css in linea per semplicita', ma ricordo che e' sempre molto meglio optare per un css esterno linkato alle pagine soprattutto per comodita d'aggiornamento
commento del css:
| Codice: |
#menu {
font-family: verdana, arial, sans-serif;
}
|
dichiaro una font; di solito lo faccio nel body, avrei potuto farlo nel link, ho optato per farlo nel div
| Codice: |
#menu ul {
width: 200px;
list-style: none;
margin: 0px;
padding: 0px;
background: #FF8C1B;
border: 3px outset #c0c0c0;
}
|
- determino la larghezza totale del mio menu
- tolgo il pallino ai punti elenco tramite list-style: none;
- tolgo il margine e tolgo il padding: cio' allo scopo di avere la certezza che il pallino non si visualizzi in nessun browser (il semplice list-style infatti non e' sufficiente)
- do uno sfondo arancione
- do un bordo a rilievo
| Codice: |
#menu li {
border: 1px solid #FF8C1B;
}
|
- do un bordino di un pixel dello stesso colore dello sfondo per sopperire ad un baco di ff che altrimenti aggiungerebbe troppo spazio tra un punto elenco e l'altro; non so per quale motivo, ma con border: 0px non si ottiene lo stesso effetto (ricordo che la lista e' il tag giusto nel quale inserire un menu)
| Codice: |
#menu a {
color: #000;
display: block;
height: 24px;
background: #FF8C1B url(butterup.gif) no-repeat center left;
padding-left: 32px;
padding-right: 32px;
text-decoration: none;
font-weight: bold;
}
|
la formattazione piu' corposa, vediamola un punto alla volta:
- color #000: dichiaro di volere un testo di colore nero per i link
- display block: il tag a e' un tag inline, trasformandolo in tag blocco occupo tutto lo spazio del punto elenco ed attivo il link anche nello spazio non direttamente coperto dal testo
- height 24px: e' la misura delle immagini che andro' ad usare; per avere la certezza che siano correttamente visualizzate, do l'altezza ad a
- do un colore di sfondo uguale al colore di sfondo dell'immagine e dichiaro di volere un'immagine da usare come sfondo, da non ripetere e da posizionare al centro nel lato sinistro
- lascio uno spazio a sinistra pari alla larghezza dell'immagine piu' un paio di pixel per evitare l'effetto appiccicaticcio
- idem a destra perche' la seconda immagine comparira' da quel lato
- text-decoration none: serve per togliere la sottolineatura di default dal link
- uso il grassetto
l'uso di a anziche' di a:link fa si che i parametri impostati valgano per tutti gli stati di a
| Codice: |
#menu a:hover {
color: #FF8C1B;
background: #000 url(butterdown.gif) no-repeat center right;
text-align: right;
}
|
modifico alcuni stati di a:hover:
- cambio il colore del testo dal nero iniziale all'arancio usato per lo sfondo di a
- cambio il colore di sfondo dall'arancio di prima al nero ed inserisco un'immagine da visualizzare stavolta al centro sul lato destro
- decido di allineare il testo a destra
et voila': un menu crossbrowsing con tutti i crismi dell'accessibilita' e con effetto onmouseover che restera' funzionante anche se il navigatore ha disabilitato ja*ascr*pt (ricordo che onmouseover e' un gestore di eventi di ja*ascr*pt e come tale disattivabile come tutti gli altri scr*pt)
con un po' di fantasia, e' possibile ottenere menu ben piu' elaborati e gradevoli di quello proposto  |
|
| Top |
|
 |
kkk2003
Dio minore
Registrato: 11/08/05 07:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 27 Ott 2005 08:40 Oggetto: |
|
|
Bello, grazie di questi preziosi aiuti!
E... se volessimo creare un sottomenu' a comparsa? Ad esempio... quando il mouse va su "cosa faccio", si apre un sottomenu', ed il resto va ad abbassarsi, tipo
cosa faccio
la mattina
il pomeriggio
la sera
la notte
tempo libero
....
E' una cosa complicata? |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 27 Ott 2005 13:48 Oggetto: |
|
|
| kkk2003 ha scritto: | Bello, grazie di questi preziosi aiuti!
E... se volessimo creare un sottomenu' a comparsa? Ad esempio... quando il mouse va su "cosa faccio", si apre un sottomenu', ed il resto va ad abbassarsi, tipo
cosa faccio
la mattina
il pomeriggio
la sera
la notte
tempo libero
....
E' una cosa complicata? |
mh.. no, qualcosa ti trovo |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 27 Ott 2005 23:44 Oggetto: |
|
|
mi sa che con i soli css non riesci a fare quel che vorresti; ti serve obbligatoriamente uno script lato client o lato server, sorry  |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 07:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 28 Ott 2005 16:20 Oggetto: |
|
|
| fa niente, era solo un'idea, e se fattibile con css, era un altro utile tutorial!! |
|
| Top |
|
|
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 29 Ott 2005 21:26 Oggetto: |
|
|
Qualcosa del genere esiste. Peccato che come al solito Internet Explorer non collabori.
Cià
JK |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 29 Ott 2005 21:30 Oggetto: |
|
|
| juzo kun ha scritto: | Qualcosa del genere esiste. Peccato che come al solito Internet Explorer non collabori.
Cià
JK |
fiigo! 
edit: e pure taggato giusto! 
ri-edit: in effetti bastava pensarci; ho fatto una prova e ci si riesce facilmente con li:hover... che ie non supporta   |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 13 Nov 2005 22:37 Oggetto: |
|
|
riuppo questo thread, per qualche correzione, su segnalazione di una nuova amica del forum
le inesattezze del lavoro sono due:
la prima e' che il menu non e' completamente accessibile, perche' ho usato misure assolute anziche' in percentuale per la larghezza, la seconda e' che non ho usato un contrasto di colore sufficiente e questo l'ho verificato usando il link segnalato da questa nuova amica del forum; ho sottoposto il css ed il risultato e' stato il seguente:
| Citazione: |
#menu ul
avvertenza:
* Colore principale: Non specificato
* Colore di sfondo: #FF8C1B
|
corretto: quando si specifica un colore per il testo, e' opportuno specificare anche un colore di sfondo
| Citazione: |
#menu a
La differenza di luminosità tra i due colori è sufficiente. Il valore di soglia è 125, e il risultato tra il colore principale ed il colore di sfondo è 161.
La differenza di colore tra i due colori non è sufficiente. Il valore di soglia è 500 e il risultato della differenza tra il colore principale ed il colore di sfondo è 422.
Mentre la differenza tra i colori non è conforme ai valori specificati dal W3C, è conforme ai valori utilizzati da Hewlett Packard. Hewlett Packard raccomanda un limite di differenza di colore di 400.
avvertenza:
* Colore principale: #000
* Colore di sfondo: #FF8C1B url(butterup.gif) no-repeat center left
#menu a:hover
La differenza di luminosità tra i due colori è sufficiente. Il valore di soglia è 125, e il risultato tra il colore principale ed il colore di sfondo è 161.
La differenza di colore tra i due colori non è sufficiente. Il valore di soglia è 500 e il risultato della differenza tra il colore principale ed il colore di sfondo è 422.
Mentre la differenza tra i colori non è conforme ai valori specificati dal W3C, è conforme ai valori utilizzati da Hewlett Packard. Hewlett Packard raccomanda un limite di differenza di colore di 400.
avvertenza:
* Colore principale: #FF8C1B
* Colore di sfondo: #000 url(butterdown.gif) no-repeat center right
|
anche qua e' corretto; per un controllo diretto del contrasto, vi ripropongo un link a cui fa capo anche la pagina segnalata sopra e dove potete inserire le due tinte da voi scelte per verificare in un attimo se i colori usati sono conformi; il link era stato citato in questa discussione
per riparare a questi due piccoli problemi vi sara' sufficiente - riutilizzando il codice proposto - dare misure in percentuale alla larghezza ed usare colori con un maggior contrasto |
|
| Top |
|
|
vathek
Dio maturo
Registrato: 06/09/05 16:09
Messaggi: 1559
Residenza: Roma
|
| Inviato: 13 Nov 2005 22:41 Oggetto: |
|
|
[OT]
e con questo stai a quota 5500... 
[/OT] |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 13 Nov 2005 22:46 Oggetto: |
|
|
| Vathek ha scritto: | [OT]
e con questo stai a quota 5500...
[/OT] |
 |
|
| Top |
|
|
vathek
Dio maturo
Registrato: 06/09/05 16:09
Messaggi: 1559
Residenza: Roma
|
| Inviato: 13 Nov 2005 22:54 Oggetto: |
|
|
| Ti s'è incantata la linguetta??? |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 13 Nov 2005 23:24 Oggetto: |
 |
|
| Vathek ha scritto: | | Ti s'è incantata la linguetta??? |
no mi si e' incantata la connessione
(basta ot o il gran capo ci fulmina  ) |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
