Contenido

Efecto menu MAC OS

9 feb

+ 4

Hoy navegando por la red me he encontrado con esta web que realiza un efecto muy curioso, me recuerda al que usa Apple en su Mac OS. Y me ha sorprendido el código usado para implementarlo, no se si será muy estandard, pero funciona en IE y en Firefox (si alguien me confirma algun más lo añado).

La implementación es muy facil, y se pueden conseguir efecto muy curiosos sin tener que utilizar javascript para ello.

Necesitaremos declarar unos estilos CSS y una lista de elementos (li).

El CSS

body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 85%;
}
li { font-size: 1em; }
li:hover { font-size: 2em; }
li:hover + li { font-size: 1.6em; }
li:hover + li + li { font-size: 1.3em; }

La declaración del body no es necesaria, y lo demás es algo confuso pero si miramos los valores de tamaño veremos que es una escalera que monta referenciandose al posterior con + li.

y el HTML es tan simple como un UL normal.

<ul>
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    <li>Cuarto</li>
    <li>Quinto</li>
    <li>Sexto</li>
</ul>

Actualización

Trebol-a nos informa que en Opera 9 funciona perfectamente y en Konqueror a medias.

HTML, CSS, programacion

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.