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:

newdrop screenshotnewdrop menu screenshot

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

3 risposte a Newdrop CSS menu: alpha release

  1. […] carl0z.wordpress.com/2007/06/19/newdrop-css-menu-alpha-release/ […]

  2. Nicolò scrive:

    Davvero bello, molto molto usabile. Ci sono progressi con la compatibilità in IE6?

  3. carl0z scrive:

    ciao nicolo’,

    grazie x le belle parole.

    l’estate 2007 ho cambiato lavoro e tanto il blog quanto le sperimentazioni sui css si sono arenati.

    la compatibilita’ con ie6 in ogni caso e’ praticamente impossibile via css puro – devi appoggiarti su javascript

    ho integrato un menu simile a questo in un modulo di joomla, in un sito che sto realizzando per un cliente. lo vedi in versione demo su http://topotek.openconsul.com

    buona giornata
    carloz

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: