menu
Kompozer: Menús dinámicos (no desplegables) en CSS
El Blog de Joaclint Istgud
Diseño por ordenador con Freeware
Diseño por ordenador con Freeware
Optimizado para 1024x768
Esto más que un tutorial es una memoria de una experimentación realizada para iniciarme el la realización de este tipo de menús con CSS
Partí de la creación de uno de estos menús en una herramienta online de la muchas que existen ya pare este fin. Después, una vez generado el código lo analicé y traté de conseguirlo a través del editor de CSS de Kompozer.
La herramienta online que usé para conseguir un código inicial fue Css Menu Maker. Esta es su carta de presentación:
Código HTML
<div id='menu4'> <ul> <li ><a href='http://joaclintistgud.wordpress.com/'>Edición Bitmap</a></li> <li ><a href='http://joaclintistgud.wordpress.com/'>Edición Vectorial</a></li> <li ><a href='http://joaclintistgud.wordpress.com/'>Edición 3D</a></li> <li ><a href='http://joaclintistgud.wordpress.com/'>Edición Audio-Vídeo</a></li> <li ><a href='http://joaclintistgud.wordpress.com/'>Edición Web</a></li> <li ><a href='http://joaclintistgud.wordpress.com/'>Utilidades</a></li> </ul> </div> |
Código CSS
| /* V1 */ *{ list-style:none; margin:0px; padding:0px; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(images/menu4.gif) 0 -64px; padding: 8px 0 0 30px; } |
Css Menú Maker también permite la descarga de las imágenes en el caso de que el estilo las necesitase.
Pero para mi experiencia lo más práctico resultaba descargarlo todo de golpe y descomprimir en mi ordenador.
Después de descomprimir encontré un archivo html llamado sample.html además de un minitutorial de instalación en el que se dice que no use sample.html en mi web (desconozco el motivo)
Echando un vistazo a la carpeta de imágenes me topé con la primera sorpresa:
¿Sólo una imagen?. Algo me decía que el asunto sería más fácil si las imágenes fueran independientes: una url cuando no haya ratón, otra cuando el ratón esté encima...
Además de su apariencia cuando el ratón no pasa por encima, en el momento de la navegación pude verificar que su apariencia era esta:
Era el momento de abrir el archivo sample.html desde Kompozer:
Echando un vistazo a la carpeta de imágenes me topé con la primera sorpresa:
Además de su apariencia cuando el ratón no pasa por encima, en el momento de la navegación pude verificar que su apariencia era esta:
Era el momento de abrir el archivo sample.html desde Kompozer:
Verifiqué el código y también accedí al editor CSS para ver lo que se había creado...
Esto tampoco me resultó raro. Ya sabía que la mejor manera de organizar la página es poner el contenido (HTML) por un lado y el estilo (CSS) por otro.
Ahora comenzaba lo bueno: intentar conseguir lo mismo partiendo de cero y sólo con el editor CSS de Kompozer. Analizando el código enseguida comprendí que para hacer un menú lo primero que tenía que crear era una lista, así que:
Creé los enlaces pertinentes...
Analizando el archivo sample.html vi que entre las etiquetas <body> y <ul> había que crear una denominada <div id="nombre_del_menu">
No pude conseguir esa línea de código HTML desde el editor visual de Kompozer, así que me conformé con algo que parecía igualmente lógico: darle una propiedad id a la lista en cuestión. Asegurándome de que tenía seleccionado uno de los elementos de la lista hice la línea de comandos Formato/Lista/Propiedades de lista...; verifiqué que estaba seleccionada la opción Cambiar la lista entera pulsé Edición Avanzada y apareció este cuadro en el que puse a mano el Atributo id (en el desplegable no aparecía div id); además puse el Valor menu (este sería en nombre identificativo de mi menú a partir de ahora)
Accedí al editor de CSS y creé un <style> al que denominé estilo_menu y al exportarla me aseguré de guardarla al lado de archivo HTML (la denominé estilo_menu.css)
Era el momento de comenzar a imitar los parámetros que me dio Css Menu Maker. Lo primero
Aquí me asaltó la duda puesto que yo no había visto nada igual. Mis conocimientos de HTML y lo poco que llevaba visto de CSS no me aclaraban gran cosa. Un paseo por internet haciendo algunas consultas a Google me llevaron a la conclusión de que merecía la pena seguir la lógica y denominar al primer Selector #menu dentro de mi hoja de estilo. Aquí definiría las características más generales de la lista en su conjunto. Probé suerte.
Creé desde el editor CSS una regla que se denominaba #menu. Para ello hay que asegurarse de tener seleccionado estilo_menu.css y después pulsar el icono de la paleta de pintor.
Con esta regla seleccionada fui a la pestaña Listas y escogí Tipo para estilo de la lista = none. De regreso a la pestaña General, me encontré con con esto.
Sólo me faltaban Margin y Padding... Para ello fui a la pestaña Caja y puse 0px en todas las casillas de Márgenes y de Rellenos.
De regreso a General me encontré con esto y creía que ya era capaz de comerme el mundo...
| *{ list-style:none; margin:0px; padding:0px; } |
Aquí me asaltó la duda puesto que yo no había visto nada igual. Mis conocimientos de HTML y lo poco que llevaba visto de CSS no me aclaraban gran cosa. Un paseo por internet haciendo algunas consultas a Google me llevaron a la conclusión de que merecía la pena seguir la lógica y denominar al primer Selector #menu dentro de mi hoja de estilo. Aquí definiría las características más generales de la lista en su conjunto. Probé suerte.
Creé desde el editor CSS una regla que se denominaba #menu. Para ello hay que asegurarse de tener seleccionado estilo_menu.css y después pulsar el icono de la paleta de pintor.
El menú lo hemos creado con una lista y ésta tiene unas propiedades en el HTML que no interesan en el CSS, por ejemplo los puntos que la encabezan (viñetas). Me pregunté por qué no los eliminaba desde el HTML en las Propiedades de lista (Ninguno) y asunto arreglado; pero después pensé que era mejor así. en el HTML tendrían la estructura propia del HTML y el CSS se encargaría de anular los grafismos de los puntos respetando la filosofía de contenido por una lado y estilo por otro.
¿Necesitaba seguir editando la lista en su conjunto? Según el código de Css Menu Maker sí...
Las características de los bordes (color, ancho, dónde sí y dónde no...) se definen desde la pestaña Bordes
| #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; } |
Las características de los bordes (color, ancho, dónde sí y dónde no...) se definen desde la pestaña Bordes
Y el ancho general de la lista wigth: 200px se define desde la pestaña Caja:
#menu li sería el Selector necesario para hacer que los elementos de la lista se distribuyan de modo horizontal. Decidí experimentar un poco. En mi caso la restricción de 200px de ancho para toda la lista sería un problema. En este Selector se definirían todos los parámetros propios de los elementos individuales que conforman la lista. Si cambiaba ese ancho de 200 por 400px de #menu y cambiaba la Caja de #menu li a Float Left, el resultado era este (le puse a #menu li 20px de margen derecho para que se separaran)
Podía, por lo tanto para este menú eliminar este Selector #menu li, pero decidí mantenerla de momento por si me aventuraba en algún experimento más.
Tenía que comenzar con el Selector #menu li a relativo a los enlaces (a) de los elementos (li) de la lista. Una vez creado ese Selector mi objetivo era tomar la información proporcionada por Css Menu Maker
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
Y el ancho general de la lista wigth: 200px se define desde la pestaña Caja:
#menu li sería el Selector necesario para hacer que los elementos de la lista se distribuyan de modo horizontal. Decidí experimentar un poco. En mi caso la restricción de 200px de ancho para toda la lista sería un problema. En este Selector se definirían todos los parámetros propios de los elementos individuales que conforman la lista. Si cambiaba ese ancho de 200 por 400px de #menu y cambiaba la Caja de #menu li a Float Left, el resultado era este (le puse a #menu li 20px de margen derecho para que se separaran)
Podía, por lo tanto para este menú eliminar este Selector #menu li, pero decidí mantenerla de momento por si me aventuraba en algún experimento más.
Tenía que comenzar con el Selector #menu li a relativo a los enlaces (a) de los elementos (li) de la lista. Una vez creado ese Selector mi objetivo era tomar la información proporcionada por Css Menu Maker
Tenía que comenzar con el Selector #menu li a relativo a los enlaces (a) de los elementos (li) de la lista. Una vez creado ese Selector mi objetivo era tomar la información proporcionada por Css Menu Maker
| #menu4 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } |
Me desconcertó ver que en un mismo selector hay dos veces un parámetro height con dos valores distintos. Traté de ordenar mis pocos conocimientos y lo que había curioseado por Internet y decidí que aquí lo más importante era hacer que el texto no tuviera decoración de ningún tipo para evitar el subrayado; así me aseguraba eso de text-decoration: none; lo demás era arameo para mí.
También fui a Caja y le asigné una altura de 32px. La imagen tenía 96px de alto así que algo me decía que esta era la medida que debía introducir en ese campo ya que solo se iba a ver un tercio de la única imagen. Sin mucho convencimiento tiré para adelante...
Le tocaba el turno a #menu li a:link para definir los parámetros de los elementos de la lista cuando el ratón no actúa sobre ellos. Como ese iba a ser también su aspecto cuando los enlaces han sido visitados, podía editar a la vez el Selector #menu li a:visited. Creé el Selector #menu li a:link, menu li a:visited y tomé como referencia el código de Css Menu Maker.
#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 30px;
}
Necesitaba que se comportaran como bloques para que el enlace no sea sólo efectivo sobre el texto sino sobre toda la pestaña. Lo hice desde la pestaña Caja, en Display block
En la pestaña Texto asigné el color #9E3C02 y en la pestaña Caja definí los rellenos (padding) que me decía Css Menu Maker (8px 0 0 30px) Después de una cuantas pruebas llegué a la conclusión de que el orden es referente a arriba, derecha, abajo, izquierda
Por la apariencia del resultado algo me decía que estaba en el buen camino. Sólo me faltaba la imagen. Desde la pestaña Fondo la cargué y...
Algo había salido mal. El alto de las pestañas no se correspondía con el original y se creaba una línea blanca en lugar de oscura en las separaciones. Me dirigí al Selector #menu li a para que la altura que iba a meter afectará a todos los selectores que tuvieran que ver con los enlaces. En la altura metí un valor de 32px pero no se correspondía así que fui descendiendo con las flechas y, curiosamente, el valor correcto era 24px (recordé que este valor eight lo había obviado antes) El resultado:
¡Perfecto!
#menu li a:hover era el siguiente Selector. Definiría los aspectos relativos a cuando el ratón pasara por encima de una de las pestañas. Esta era mi referencia.
#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
No comprendí muy bien lo de #fff, hasta donde yo sabía los colores se definen en hexadecimal... decidí no tomarlo en consideración y puse color #ffffff (blanco) para el texto.
Estaba claro que la imagen que había que cargar era la misma pero debería sufrir un desplazamiento para dejar ver la parte que interesaba en esta ocasión. Una vez creado el Selector cargué la imagen igual que ya hice antes.
El meollo estaba en lo de 0 -32px
Esa era, sin duda, la orden que hacía el desplazamiento de la imagen pero no tenía ni idea de dónde se encontraba esa posibilidad en el editor visual de CSS de Kompozer y sigo sin saberlo. Entiendo que es una propiedad de la imagen y no de la caja, así que debería estar en Fondo. Pero allí no existe la posibilidad de desplazar la imagen un número determinado de píxeles. Allí sólo existe la posibilidad de que se pueda empezar a leer la imagen desde arriba (como ocurría, por defecto, en #menu li a:link), desde abajo o desde el centro. Ahí estaba la clave. Así que seleccioné como en el cuadro siguiente y ¡Bingo!
No fue necesario meter los datos de padding para que funcionara sin problema.
Ahora estaba seguro de que el Selector #menu li a:active (cuando se hace clic sobre el botón) no me daría ningún quebradero de cabeza. Sólo tuve que mirar el código de Css Menu Maker para ver el código del color del texto: #ffffff 
...y la definición de la posición para la imagen...
¡Y funcionó! Objetivo cumplido: crear el menú usando sólo el editor CSS de Kompozer.
Le tocaba el turno a #menu li a:link para definir los parámetros de los elementos de la lista cuando el ratón no actúa sobre ellos. Como ese iba a ser también su aspecto cuando los enlaces han sido visitados, podía editar a la vez el Selector #menu li a:visited. Creé el Selector #menu li a:link, menu li a:visited y tomé como referencia el código de Css Menu Maker.
#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 30px;
}
Necesitaba que se comportaran como bloques para que el enlace no sea sólo efectivo sobre el texto sino sobre toda la pestaña. Lo hice desde la pestaña Caja, en Display block
En la pestaña Texto asigné el color #9E3C02 y en la pestaña Caja definí los rellenos (padding) que me decía Css Menu Maker (8px 0 0 30px) Después de una cuantas pruebas llegué a la conclusión de que el orden es referente a arriba, derecha, abajo, izquierda
Por la apariencia del resultado algo me decía que estaba en el buen camino. Sólo me faltaba la imagen. Desde la pestaña Fondo la cargué y...
Algo había salido mal. El alto de las pestañas no se correspondía con el original y se creaba una línea blanca en lugar de oscura en las separaciones. Me dirigí al Selector #menu li a para que la altura que iba a meter afectará a todos los selectores que tuvieran que ver con los enlaces. En la altura metí un valor de 32px pero no se correspondía así que fui descendiendo con las flechas y, curiosamente, el valor correcto era 24px (recordé que este valor eight lo había obviado antes) El resultado:
¡Perfecto!
#menu li a:hover era el siguiente Selector. Definiría los aspectos relativos a cuando el ratón pasara por encima de una de las pestañas. Esta era mi referencia.
#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
No comprendí muy bien lo de #fff, hasta donde yo sabía los colores se definen en hexadecimal... decidí no tomarlo en consideración y puse color #ffffff (blanco) para el texto.
Estaba claro que la imagen que había que cargar era la misma pero debería sufrir un desplazamiento para dejar ver la parte que interesaba en esta ocasión. Una vez creado el Selector cargué la imagen igual que ya hice antes.
El meollo estaba en lo de 0 -32px
Esa era, sin duda, la orden que hacía el desplazamiento de la imagen pero no tenía ni idea de dónde se encontraba esa posibilidad en el editor visual de CSS de Kompozer y sigo sin saberlo. Entiendo que es una propiedad de la imagen y no de la caja, así que debería estar en Fondo. Pero allí no existe la posibilidad de desplazar la imagen un número determinado de píxeles. Allí sólo existe la posibilidad de que se pueda empezar a leer la imagen desde arriba (como ocurría, por defecto, en #menu li a:link), desde abajo o desde el centro. Ahí estaba la clave. Así que seleccioné como en el cuadro siguiente y ¡Bingo!
No fue necesario meter los datos de padding para que funcionara sin problema.
Ahora estaba seguro de que el Selector #menu li a:active (cuando se hace clic sobre el botón) no me daría ningún quebradero de cabeza. Sólo tuve que mirar el código de Css Menu Maker para ver el código del color del texto: #ffffff
...y la definición de la posición para la imagen...
¡Y funcionó! Objetivo cumplido: crear el menú usando sólo el editor CSS de Kompozer.
| #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(images/menu4.gif); padding: 8px 0 0 30px; } |
#menu li a:hover era el siguiente Selector. Definiría los aspectos relativos a cuando el ratón pasara por encima de una de las pestañas. Esta era mi referencia.
#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
No comprendí muy bien lo de #fff, hasta donde yo sabía los colores se definen en hexadecimal... decidí no tomarlo en consideración y puse color #ffffff (blanco) para el texto.
Estaba claro que la imagen que había que cargar era la misma pero debería sufrir un desplazamiento para dejar ver la parte que interesaba en esta ocasión. Una vez creado el Selector cargué la imagen igual que ya hice antes.
El meollo estaba en lo de 0 -32px
Esa era, sin duda, la orden que hacía el desplazamiento de la imagen pero no tenía ni idea de dónde se encontraba esa posibilidad en el editor visual de CSS de Kompozer y sigo sin saberlo. Entiendo que es una propiedad de la imagen y no de la caja, así que debería estar en Fondo. Pero allí no existe la posibilidad de desplazar la imagen un número determinado de píxeles. Allí sólo existe la posibilidad de que se pueda empezar a leer la imagen desde arriba (como ocurría, por defecto, en #menu li a:link), desde abajo o desde el centro. Ahí estaba la clave. Así que seleccioné como en el cuadro siguiente y ¡Bingo!
No fue necesario meter los datos de padding para que funcionara sin problema.
Ahora estaba seguro de que el Selector #menu li a:active (cuando se hace clic sobre el botón) no me daría ningún quebradero de cabeza. Sólo tuve que mirar el código de Css Menu Maker para ver el código del color del texto: #ffffff
...y la definición de la posición para la imagen...
¡Y funcionó! Objetivo cumplido: crear el menú usando sólo el editor CSS de Kompozer.
#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
No comprendí muy bien lo de #fff, hasta donde yo sabía los colores se definen en hexadecimal... decidí no tomarlo en consideración y puse color #ffffff (blanco) para el texto.
Estaba claro que la imagen que había que cargar era la misma pero debería sufrir un desplazamiento para dejar ver la parte que interesaba en esta ocasión. Una vez creado el Selector cargué la imagen igual que ya hice antes.
El meollo estaba en lo de 0 -32px
Esa era, sin duda, la orden que hacía el desplazamiento de la imagen pero no tenía ni idea de dónde se encontraba esa posibilidad en el editor visual de CSS de Kompozer y sigo sin saberlo. Entiendo que es una propiedad de la imagen y no de la caja, así que debería estar en Fondo. Pero allí no existe la posibilidad de desplazar la imagen un número determinado de píxeles. Allí sólo existe la posibilidad de que se pueda empezar a leer la imagen desde arriba (como ocurría, por defecto, en #menu li a:link), desde abajo o desde el centro. Ahí estaba la clave. Así que seleccioné como en el cuadro siguiente y ¡Bingo!
No fue necesario meter los datos de padding para que funcionara sin problema.
Ahora estaba seguro de que el Selector #menu li a:active (cuando se hace clic sobre el botón) no me daría ningún quebradero de cabeza. Sólo tuve que mirar el código de Css Menu Maker para ver el código del color del texto: #ffffff
...y la definición de la posición para la imagen...
¡Y funcionó! Objetivo cumplido: crear el menú usando sólo el editor CSS de Kompozer.
| #menu4 li a:hover { color: #fff; background: url(images/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } |
Estaba claro que la imagen que había que cargar era la misma pero debería sufrir un desplazamiento para dejar ver la parte que interesaba en esta ocasión. Una vez creado el Selector cargué la imagen igual que ya hice antes.
El meollo estaba en lo de 0 -32px
Esa era, sin duda, la orden que hacía el desplazamiento de la imagen pero no tenía ni idea de dónde se encontraba esa posibilidad en el editor visual de CSS de Kompozer y sigo sin saberlo. Entiendo que es una propiedad de la imagen y no de la caja, así que debería estar en Fondo. Pero allí no existe la posibilidad de desplazar la imagen un número determinado de píxeles. Allí sólo existe la posibilidad de que se pueda empezar a leer la imagen desde arriba (como ocurría, por defecto, en #menu li a:link), desde abajo o desde el centro. Ahí estaba la clave. Así que seleccioné como en el cuadro siguiente y ¡Bingo!
Ahora estaba seguro de que el Selector #menu li a:active (cuando se hace clic sobre el botón) no me daría ningún quebradero de cabeza. Sólo tuve que mirar el código de Css Menu Maker para ver el código del color del texto: #ffffff
...y la definición de la posición para la imagen...
¡Y funcionó! Objetivo cumplido: crear el menú usando sólo el editor CSS de Kompozer.
Y hasta aquí el tutorial. Si consideran que está incompleto, que tiene errores o quieren aportar alguna mejora, dejen su sugerencia aquí
Joaclint Istgud. Con Kompozer 0.77
Diseño por ordenador con Freeware