Link para download: CLIQUE AQUI

Questi 3 siti vi danno/creano i menu con effetto roolover in un attimo...

LISTAMATIC
LIST-O-MATIC (creato basandosi su LISTAMATIC)
E-LUSION

Il primo e il terzo vi fanno scegliere fra dei menu già pronti.. voi scaricate il codice e cambiate i link..
Il secondo invece vi da la possibilità di inserire gia il testo che volete nel menu ed il link, vi fa scegliere fra diversi stili, se il menu lo volete in orizzontale o verticale e se volete attribuire come class o id il codice.

Va bene copiare ma mi raccomando non spacciateli per vostri lavori!!
CIAO!

Clicca per ingrandire

carl0z.wordpress.com/2007/06/19/newdrop-css-menu-alpha-release/

menu css based su due livelli orizzontali

E allora "esibisco" qualcosina. Come il Newdrop menu. Versione 0.13. Un menu css based su due livelli, entrambi orizzontali. Con qualche funzioncina carina.

Spunto di partenza, una mail su css-discuss (LA lista di discussione sui css, probabilmente) e un menu preso come esempio / sfida: quello utilizzato in questa pagina su Projectseven.com. Volevo copiarlo, poi ho visto del codice complesso complesso e un tot di javascript, e ho provato a rifarlo. Da zero, from scratch. Che è sempre divertente.

Risultato:

Il codice html ancora una volta prevede (come in Suckerloz) liste e sottoliste, e la "magia" è tutta nel css.

Il file .css dell'esempio è questo - dovrebbe essere sufficientemente pulito, ordinato e commentato (ma lo sistemerò meglio).

Commenti:

l'impatto grafico mi sembra discreto - mi sono limitato a clonarlo :-).

Come tipo di menu, la cosa + interessante mi sembra la possibilità di segnalare - in modi diversi - la sezione attiva sul primo livello e la sotto-pagina attiva sul secondo. Idem per il doppio effetto rollover.

Ci sarebbero dei commenti "pseudotecnici" da fare, ma li lascio per il post aggiornato (o per un prox post). In ogni caso il codice è lì da guardare - e con qualche commento.

Limiti (attuali, at least): il menu è gestito interamente via css (questo non è un limite :-D). Testato su IE7 e Firefox, funziona ok. Non va invece con IE6, per il supporto limitato del browser alla pseudoclasse :hover.

Sto sistemando la compatibilità con IE6 - da un lato un foglio di stile dedicato, dall'altro un'operazioncina sul DOM per aggiungere dinamicamente le classi necessarie. Aggiornerò il post. Asap.

Ah. Nel menu esempio i link sono fittizi (#). E la classe .active è inserita staticamente nell'html. Magari nella prossima versione cerco di fargliela gestire dinamicamente, via php

Suckerloz è un menu css based (con un tocco di javascript esclusivamente per gli utenti di Internet Explorer - che come noto fino alla versione 6 supporta la pseudoclasse :hover solo sugli elementi <a>). Un menu verticale a scorrimento interno - che da un lato riprende, come codice, il suckerfish dropdown menu e la sua variante a scorrimento orizzontale, e dall'altro cerca invece di emulare, (molto) parzialmente, una tecnica js molto usata oggi, l'espansione delle sotto-sezioni (vedi la demo della famosa e bellissima libreria accordion, del framework mootools).

Ho preparato alcuni esempi, che fanno vedere i diversi menu, in evoluzione e in azione.

• Primo venne suckerfish, che faceva via css quello che altri facevano via dhtml. I sotto menu scendevano dai vari item di un menu di navigazione orizzontale. Ecco quindi suckerfish nudo, stilizzato, e in un layout di pagina.
• Poi arrivò horizontal dropdowns, che riprendeva suckerfish ma usava come base un menu verticale (da cui i sottomenu uscivano in orizzontale). Ecco qui horizontal dropdowns nudo, stilizzato, e in azione in una pagina. Bello, no?
• E finalmente eccoci a Suckerloz, che sfrutta la tecnica altrui, la riduce all'osso e ... suckerloz solitario, suckerloz in una pagina, e suckerloz in una seconda pagina (stavolta senza background diverso per la colonna, nè elementi relative in basso, e con footer fixed).

Any feedback?

Ieri mi sono imbattuto in una implementazione, meglio in un utilizzo creativo della tecnica che sta dietro a Hoverbox, da parte di Stuart Robertson, di Designmeme: eccoci qui a parlare di Hoverbox menu (l'esempio fatto da Stuart e' in fondo alla pagina).

Invece di un ormai "comune" - sebbene pur sempre splendido, quando implementato bene - menu con rollover via css Stuart propone un menu in cui nel momento del passaggio del mouse sull'item del menu (stato a:hover) l'immagine di sfondo si ingrandisce (come in hoverbox il passaggio del mouse sulla miniatura offriva la visualizzazione del pic full size). Bello.

Da notare, tra le altre cose, che Stuart usa la tecnica CSS Sprite - una stessa immagine contiene quella base e quella che viene sovrapposta, evitando percezioni di ritardo sul rollover (ed aggirando anche il problema del flickering di IE6) senza bisogno di preload gestiti via js.

OK. Guarda(te) l'esempio di Stuart, dunque, e valutate.

Ma a sto giro ho voluto metterci su le mani anch'io. Ecco dunque il mio esempio.

L'effetto "specchio-riflesso 2.0" l'ho ottenuto giochicchiando con Gimp, quindi non c'entra con il codice css.

Dove invece ho modificato, minimamente, le spaziature, per evitare sia le sovrapposizioni (che invece Stuart voleva) sia che l'immagine del rollover andasse a muovere le altre, per cui le ho assegnato un margine negativo - in div#navigation li a:hover span abbiamo un margin-right: -45px.

Altra noticina, ovvero un limite in termini di accessibilità: i link testuali sono nascosti - attraverso la regola div#navigation li a span em{display: none;}.

Un'implementazione altamente professionale della tecnica dovrebbe invece utilizzare l'image replacement andando solo a coprire i link testuali - in modo che possano essere fruiti in contesti di visualizzazioni senza immagini.

Il guru da cui pesco il suggerimento è, per l'ennesima volta, Alessandro Fulciniti.

Ultime due cose: il mio esempio è in fase "alfa", assolutamente non preciso al pixel, nè con .png realmente ottimizzate. E per rendere il menu davvero "cool" manca anche una immagine per lo pseudo-stato active (la pagina corrente).

Posterò un'update...