Hoy construiremos un menú vertical, pero con un estilo determinado para que al pasar el puntero por encima de uno de los enlaces, en lugar de generar un simple efecto de cambio de color de fuente, fondo, bordes o similar, una especie de marca de un color que contraste con el fondo del menú, se desplazará de arriba abajo hasta llegar al elemento seleccionado.
Como dije, la estructura HTML es sencilla, una caja (en el ejemplo con clase menudesv) y dentro de ella una serie de enlaces de texto. Eso sí, al final de todos los enlaces y siempre dentro de la caja general, añadiremos un div vacío con la clase menudesv. Este último será el que generará un rectángulo de color para el efecto.
Ya lo anticipé, pero como podéis comprobar sólo es cuestión de añadir a vuestro menú actual un par dediv con las clases adecuadas. A estas alturas supongo que ya todos sabéis que esto va en cualquier gadget de cabecera, sidebar o pie, aunque por su formato quizás lo más adecuado sería insertarlo en la barra lateral. Dicho queda por si acaso. Para los que lo quieran en la plantilla, simplemente habría que cambiar las comillas dobles (") por simples (').
Y como me gusta decir, ahora viene la magia que hace que esto funcione como queremos, el CSS.
No hay mucho que comentar sobre el formato del menú horizontal, salvo que como siempre se pueden cambiar colores, anchos, bordes etc.
La parte que controla el :hover sí que tendréis que ajustarla en función del número de elementos que tenga vuestro menú. En primer lugar hay que declarar tantos .menudesv a:nth-child(X):hover ~ .marcav como enlaces vaya a tener el menú, cada uno con su correspondiente número ordinal (X).
Luego sólo se trata de ponerle un valor para el topigual a la n-esima parte del alto total. Eso se calcula simplemente dividiendo 100% entre el número de elementos y luego multiplicando por el puesto que ocupa el enlace menos uno.
En el ejemplo, al ser 8 enlaces el valor base es 100/8=12.5% por lo que para el primero el valor detop será 12.5*(1-0)= 0.
Para el segundo 12.5*(2-1)=12.5%
Para el tercero 12.5*(3-1)=25.0%
EmoticonEmoticon