Newdrop CSS menu: alpha release

Sto trascurando javascript (e disimparando quel poco che so di Ajax per via di una ricaduta, mani stomaco cervello e tutto, nel meraviglioso mondo dei CSS.

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