Questi tre esempi di menu dinamici avanzati con i CSS facevano parte in origine del materiale preparato per un progetto di un libro sui CSS. Li ripresento in questa sede adattandoli alle esigenze dei browser moderni. Infatti per supportare Internet Explorer 6 venivano usati i behavior HTC, ormai non più supportati da IE e quindi obsoleti. A distanza di quattro anni questi tre esempi funzionano ancora e penso che potranno esservi utili nei vostri progetti.
Il primo demo propone un semplice menu flyout (a comparsa laterale). Questo effetto si ottiene creando un posizionamento contestuale nella voce di lista che contiene il sottomenu, che viene posizionato in modo assoluto rispetto al suo genitore. In effetti il sottomenu apparirà fuori dal limite destro del menu principale: la proprietà overflow, se non settata esplicitamente, non ha effetto in questo caso sul contenitore principale.
Il secondo demo propone un menu combo, ossia dropdown e flyout combinati insieme. Lo stesso principio del posizionamento contestuale si applica anche in questo caso. Prima viene il menu a discesa, che al suo interno avrà una voce che contiene un sottomenu flyout.
Il terzo e ultimo demo, invece, crea l'effetto di un menu a comparsa partendo da un bottone posizionato in modo assoluto sulla parte sinistra dello schermo e centrato in verticale. All'epoca non esistevano ancora le animazioni CSS3, quindi penso che con qualche aggiunta sia possibile ottenere un effetto più fluido.
Come al solito, potete usare liberamente il codice degli esempi. Se volete adattare questi esempi a dei vostri progetti e avete bisogno di una mano, non esitate a contattarmi. :-)
Demo
esempio non disponibileesempio non disponibileesempio non disponibile