chi sa fare questo menu?

[freetech]

guardate questo sito....in alto c'è un menu....passandoci sopra il mouse esce una underline (sottolineatura) doppia colorata....qualcuno sa come ottenerla?

http://www.rebelia.it/

grazie :-)

[salasir]

.menu ul li a, {
            color: #808080;
            background: transparent;
            text-decoration: none;
            border-bottom: 3px solid #fff;
            }
.menu ul li a:hover, {
               border-bottom: 3px solid #ff900f;            
               }

E' semplicemente l'utilizzo di un bordo nella condizione di :hover, eliminando la sottolineatura standard dei link!

[freetech]

si può fare anche senza i tag ul?....il mio menu non è impostato con ul, finora ne avevo uno che faceva apparire una semplice underline settando solamente gli attributi a:link a:visited e a:hover
grazie

[salasir]

Normalmente un menù, in quanto lista di link, è meglio definirlo con <ul> e[*]. Soprattutto dal punto di vista semantico.

Comunque, basta togliere le definizioni ul e li e dovrebbe descrivere tutti i tag <a> all'interno della classe ".menu" .

.menu a, {
            color: #808080;
            background: transparent;
            text-decoration: none;
            border-bottom: 3px solid #fff;
            }
.menu a:hover, {
               border-bottom: 3px solid #ff900f;            
               }

[mahamatt]

Consiglio di utilizzare sempre il tag <ul> nei menu, principalmente per correttezza semantica, ma non solo: fate un piccolo test, provate a disabilitare i css e visitate il vostro sito "nudo e crudo". Esso dovrebbe essere comunque facilmente consultabile e fruibile. Con le liste, questo accade; un menu (anche orizzontale) di molte voci, viene reso in un gradevole, ordinato elenco puntato. Esempio:

• CHI SIAMO
• I NOSTRI PRODOTTI
• DOVE SIAMO
• I NOSTRI CLIENTI
• AREA RISERVATA
• POLITICA SULLA PRIVACY
• CONTATTACI

Ma con gli stili applicati semplicemente ai tag <a>, tutte le voci di un menu sarebbero rese su un'unica riga con evidente difficoltà a capire dove finisce un link e dove comincia quello dopo (un risultato confusionario, specie se i link consistono in più di una parola). Esempio:

CHI SIAMO I NOSTRI PRODOTTI DOVE SIAMO I NOSTRI CLIENTI AREA RISERVATA POLITICA SULLA PRIVACY CONTATTACI

:master: :master: :master:

[freetech]

perfetto funziona....ho aggiunto anche un piccolo padding bottom per distanziare la linea....l'unico dubbio che ho avuto per non usare ul è stato per il fatto che al posto dei pallini che di solito ul genera io utilizzo degl'alberetti creati da me....si può sostituire l'immagine del cerchietto gnerato da ul con l'immagine da me creata?
grazie

[salasir]

Hai due possibilità:

sostituire il pallino o cerchietto con la tua immagine:

ul {list-style:url("Image.gif");}

oppure indicare list-style:none e definire l'immagine come background allineato a sx.

Liste con marcatori perfetti

[mahamatt]

solitamente adotto la seconda possibilità: impostando le immagini come background dei[*] ho un controllo maggiore su margini, padding e posizione dello sfondo stesso.
Con list-style-image, inoltre, ho riscontrato vari problemi di compatibilità crossbrowser...

[freetech]

ti ringrazio molto per le informazioni....
avrei un'ultima domanda...
adesso che sono riuscito a creare il mio menu con il border-bottom che appare quando passa il mouse....come faccio a far rimanere la voce selezionata con il bordo inferiore quando appunto si apre la pagina? Mi spiego meglio....ad esempio ho un menu di tre parole

negozio chi siamo prodotti

quando passo con il mouse sopra esce il bordo inferiore....


se io clicco su negozio e quindi mi si apre la pagina negozio come faccio a rendere la voce "negozio" con il bordo inferiore visualizzato ma senza collegamento ipertestuale cosa che rimane per spostarsi nella pagina chi siamo e prodotti?

Ovviamente questa cosa dovrebbe valere per tutte le voci nel momento in cui ntriamo nella pagina a loro dedicata....insomma il bordo deve informare che in quel momento ci troviamo nella relativa pagina.

Scusa la spiegazione un pò confusionaria....spero di aver reso l'idea

[salasir]

E lo sapevo che prima o poi sarebbe arrivata ...

Dipende da come stai lavorando: solo html o linguaggi lato server (php, asp)?

Perchè se usi linguaggi lato server puoi costruire dinamicamente il menù attribuendo una classe al link corrente che definisce le caratteristiche volute (e non definendolo link).

Se lavori solo in html ... credo si possa fare con js ma non lo conosco molto ...