Un dropdown menu senza l’uso di javascript
Non è detto che sia necessario un javascript per creare un menu “a tendina”. Semplicemente basta seguire le semplici indicazioni che ci mette a disposizione Stu Nicholls di CSSPlay e il risultato è anche molto molto gradevole.
Provate e ditemi che ne pensate.
Amazon-Box creato da Giuseppe Frattura
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
20 Commenti
L’ho provato velocemente. Su FF funziona bene, mentre su Safari (OSX) il secondo si apre al clic ma poi si richiude al rilascio. :S
Cmq geniale l’idea di usare il :focus ed il :active per avere l’apertura on click
@Manuel: se leggi bene infatti il primo si apre al rollover, il secondo al clic. sono proprio due esempi diversi
IE6 non supporta l’attributo focus… per cui il secondo esempio non dovrebbe funzionare :-S
mah.. controllo meglio…
ottimo, peccato per la licenza molto restrittiva…
@Laura: dice che è supportato anche da ie6, ti prego non mi dire ciò
A me con Google Chrome non funziona molto bene…
ho controllato personalmente.. funge funge…
personalmente utilizzo sempre i css per organizzare i menu a tendina…
anche se diventa duro organizzare le compatibilita’ lo trovo un sistema meno invasivo e piu malleabile..
(anche perche’ non conosco il js)
Probabilmente è un mio problema utilizzo la versione di Chrome 2.0.174.0 ma quando sposto il focus per cercare di cliccare sul link del menù a tendina questo si chiude
Bel link
proviamolo
alors, ho testato io stessa i due esempi e confermo che funzionano entrambi sui seguenti browser: ie8 – 7 – 6, opera 9 e 10, chrome, firefox, safari.
solo il secondo esempio non funge su safari e chrome, per cui suggerirei di usare solo il primo
Grazie della precisazione Laura… cmq confermo.
Confermo il primo è ok il secondo non va con Safari (Mac) ma comunque avrei scelto la prima soluzione perchè la trovo più comoda eppoi secondo me verrebbe automatico cliccare anche per chiudere la tendina non solo per aprirla.
Molto bella come soluzione, io di norma usavo questa: http://www.lwis.net/free-css-drop-down-menu/ ora farò un po’ di prove con questa soluzione! Ottima segnalazione!
Stu è sempre stato il migliore.
E’ stato “il mio maestro” dei CSS, anche se ultimamente ha perso un po’ la vena inventiva di un tempo..
Davvero carino il primo esempio, lo trovo anch’io più comodo e pare funzioni su tutto, sto guardando ora dall’altro pc debian! grazie della segnalazione
[...] Un dropdown menu senza l’uso di javascript | Italian webdesign (tags: css menu) [...]
guardate questo, free e cross-browser:
http://sourceforge.net/projects/droplinemenuacc/
Ma come faccio a prendere il codice del primo menu a tendina?