Css menu orizzontale/verticale 5
Preview del menu css orizzontale:
Preview del menu css verticale:
Menu css bianco/nero in versione orizzontale e verticale con immagine visibile sul stato hover del pulsante.
Esempio del effetto d’un pulsante:
Compatibile con IE6, IE7, Firefox, Safari, Opera.
css-menu-esempio-5.zip (22.5 KiB, 2,291 hits)
About The Author
Number of Entries :
85
Flep
Questo è l’ antipasto ?
Onsitus
Che vuoi dire??? :/
Flep
nel senso che è sola una preview ? Perchè non riesco a trovare il menu
Flep
Ah no ! Adesso ho visto
Bello !
Onsitus
Eh lo so…non c’entrava il menu intero per quello ci ho messo solo un pulsante.
Ti ricordi qualche cosa?
willow_m87
Fantastico sto menu! ma volendo potrebbe apparire anche del testo oltre all’immagine?
Onsitus
Ciao Willow,
una soluzione sarebbe di aggiungere un altro elemento dentro i link con il tuo testo e applicare stesso stile css usato per le immagine (img).
Esempio per l’html:
<a href="#nogo"><img src="img1.jpg" alt="" /><b>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</b><span>LOREM IPSUM</span></a>
Per il css:
#menu a b{
display:none;
color:#666666;
font-size:10px;
font-weight:normal;
}
#menu a:hover{
height:250px;
/*IE6 richiede un altezza fissa per quello altezza del immagine + testo – potrebbe essere un problema se il blocco di testo ha altezza differente per ogni link*/
}
#menu a:hover b{
display:block;
}
Noizon
Scusate, chiedo anche io una cosa : nel menù così nn mi è chiaro come posso segnare la voce già  selezionata… cioè , una volta cliccata una delle voci vorrei che rimanesse visibile l’ immagine e la scritta… come posso fare? Grazie!
Onsitus
Aggiunge una classe al link che vuoi selezionato e applica stesse regole css del a:hover per a.selezionato e a.selezionato:hover (nel caso d’un link con class=”selezionato”)
Noizon
Grazie, ho usato il vostro codice per crearmi il menù del sito anche se nn ho capito bene quest’ ultimo consiglio ( ma come avrete capito nn sono un grande esperto di css eheh! ) . Se volete darci un okkio è http://www.noizon.com .
Grazie ancora e mi sà  che ci si vedrà  presto! eheh!
Onsitus
Carino…è bel menu (;
Trovo solo il testo nero su sfondo grigio scuro è un po difficile da leggere!
Se non mi sbaglio hai scaricato l’ultimo menu postato e in quello hai un esempio della classe ‘selezionato’. L’unica cosa è che per ogni pagina del tuo sito, devi dare il nome della classe al pulsante relativo a quella pagina.
Per esempio per la tuo home (in imdex html), avrai:
<a href=”index.html” title=”" class=”selezionato”>
Il css diventa (stesse regole del a:hover, a:hover img, a:hover span):
#menu2 a:hover, #menu2 a.selezionato, #menu2 a.selezionato:hover{
/*regole css*/
}
#menu2 a:hover img, #menu2 a.selezionato img, #menu2 a.selezionato:hover img{
/*regole css*/
}
#menu2 a:hover span, #menu2 a.selezionato span, #menu2 a.selezionato:hover span{
/*regole css*/
}
roy38
Scusate… sono alle prime armi…Ho un piccolo problemino da risolvere con un menù+sottomenu… chi può darmi una mano?
Vorrei che, dal sottomenu, spuntasse un altro menu, nascosto dal precedente… come posso fare?
posto il codice HTML. Ringrazio in anticipo.