Dropdown CSS menu: arriva Suckerloz

Sono lieto di annunciare Suckerloz, versione 0.11.

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>). suckerloz - screenshotUn 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?

About these ads

2 risposte a Dropdown CSS menu: arriva Suckerloz

  1. carl0z scrive:

    beh, ognuno fa la sua strada (io faccio la mia)

    ovviamente qualcun’altro aveva gia’ pensato a qualcosa di simile: vedi http://tutorials.alsacreations.com/modelesmenus/vd1.htm

    e per una lista (la migliore?) di menu via css & cia:

    http://css-discuss.incutio.com/?page=ListMenus

    carloz

  2. [...] codice html ancora una volta prevede (come in Suckerloz) liste e sottoliste, e la “magia” è tutta nel [...]

Rispondi

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...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

%d blogger cliccano Mi Piace per questo: