MENÚS CON CSS, LA ALTERNATIVA A JAVASCRIPT
Bueno, hoy tiro la casa por la ventana ... voy a intentar hacer un artículo medianamente decente e intentar sobre todo explicarme bien, que es lo más importante.
Actualmente, en el diseño web lo más llamativo son las páginas realizadas con tecnología Flash o Flex. Aportan dinamismo a las páginas y las hacen mucho más atractivas. El problema principal de estas llamativas tecnologías es la indexación en los buscadores de las páginas realizadas íntegramente con Flash o Flex. (quien dice flash también dice Swish). Un buscador siempre indexará mejor una página con textos en HTML, que una cuyos textos están en Flash. Es el precio que hay que pagar si queremos aportar un dinamismo y una belleza visual que no vamos a conseguir con páginas realizadas con HTML y demás.
Ahora bien, si optamos por una página realizada en HTML pero queremos menús con efectos más o menos atractivos, podemos usar el siempre socorrido Javascript. Se pueden hacer auténticas virguerías con este lenguale, solo teneis que mirar los enlaces que os pasé sobre Lightbox o Dojo. Usando únicamente CSS y Javascript se cosiguen cosas realmente grandiosas sin tener que echar mano de Flash.
El problema de estas tecnologías es que, las páginas que abusan de ellas, se encuentran en serio problema cuando son visualizadas con páginas que no tienen Javascript habilitado. Aunque no parezca mentira, hay muchos casos en los que el usuario sabiéndolo o no desactiva el Javascript del ordenador o símplemente son navegadores menos conocidos que tienen incompatibilidades con ciertos objetos de Javascript.
Para solventar estos problemas, lo que no podemos hacer es evitar javascript. Considero este lenguaje como algo realmente prodigioso y un avance para el diseño web atractivo sin flash.
Pero si que podemos usarlo menos, si nuestra página es sencilla. A grosso modo, intento explicar aquí una alternativa a Javascript a la hora de hacer un menú medianamente atractivo a los ojos de los usuarios, y que no perdamos potencia a la hora de indexar nuestras páginas en los buscadores y tampoco perdamos atractivo visual.
Para ello están las ojas de estilo: CSS, que si bien son treméndamente útiles también presentan incompatibilidades con ciertos navegadores, dependiendo de la versión CSS que usemos. Estas incompatibilidades son las que nos matan a los diseñadores web para hacer que las páginas que creamos se vean decéntemente en los navegadores más utilizados por los usuarios.
Vamos ahora a lo importante.
MENÚ EN CSS.
Podemos realizar menús atractivos haciendo USO única y exclusivamente de CSS. Increíble, pero cierto. En esta página teneis el ejemplo: http://www.threadless.com/
El menú que veis arribaestá confeccionado única y exclusvamente haciendo uso de listas y CSS. Las listas son unas estructuras que usamos en HTML. O sea, aceptadas por todos los navegadores. Algo treméndamente estándar. Ahora bien, los que useis IE 8 vereis que este menú no se ve del todo bien, si poneis la vista en compatibilidad de este navegador, se verá corréctamente. Deciros que la aparición de IE 8 nos ha amargado la vida un poco a los desarrolladores web jajajaja. Pero bueno, siempre se aprende y esto es bueno.
Para empezar vamos a ver todo el código y después una explicación:
CÓDIGO TOTAL.
<!--- Codigo CSS --->
<style type="text/css">
#menuli {
list-style:none;
margin:0;
padding:0;}
#menuli li {
margin:2px;
padding:0;
float:left;}
#menuli li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#FF0000;}
#menuli li a:hover {
color:#99CC00;
background-color:#003366;
font-weight: bold;
}
</style>
<!--- Nuestra pagina con nuestro menu --->
<html>
<body>
Esto es un ejemplo de como hacer un menu con efectos haciendo uso de CSS.<br>
<ul id="menuli">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
</ul>
</body>
</html>
Con solo este trocito de código podemos confeccionar un menú HORIZONTAL sin hacer uso más de lo que estamos viendo: CSS y HTML!
En el código CSS lo que vemos son una serie de ID's que marcarán el estilo del objeto HTML sobre el que lo pongamos (por medio del atributo ID como vemos en el código HTML). Veamos brevemente estas clases:
MENULI: Esta clase afectará a todas las etiquetas sobre las que definamos este estilo. En el caso del ejemplo la definimos en la etiqueta UL.
MENULI A: Esta clase afectará a todas las etiquetas A que estén bajo el dominio de una etiqueta sobre la que previmente hemos asignado la clase MENULI. (Idem para MENU LI)
MENULI LI A:hover: Esta clase afectará cada vez que pasemos el ratón sobre cualquier A (enlace) que esté dentro de un LI y a su vez dentro de una etiqueta asignada con el atributo MENULI.
Con MENU LI A, establecemos el estilo del botón cuando está en reposo, y cuando pasamos por encim de dicho botón entoces actua la clase MENULI LI A:hover.Los estilos los podemos cambiar a nuestro antojo.
Si queremos hacer el menu vertical solo tenemos que cambiar una cosa: Eliminar la linea "float:left;" de la clase MENULI LI.
Este menú es muy sencillo, más adelante (posiblemente el miércoles, os pondré un menú que he confeccionado basándome en el de la página que os he citado más arriba. Un menú realizado con CSSen el que podremos ver como se abren y cierran "ventanas" según la opcióin del menú sobre la que estemos. EN otras palabras, un menú desplegable realizado solo con CSS.
Para calquier duda, s alguien la tuviera sobre este menú, por aquí estaré, aunque creo que es intuitivo una vez que lo vemos en marcha.
Un saludo a todos!
Ramsés .... dijo
Me da a mi que eso es lo que me pasa con algunos videos de "youtube", ya sabes, lo de que se quedan en "(queda 1 elemento) esperando a...".
Por cierto, que sigo sin saber donde poner el código para buscar el Addobe, de verdad que no me aclaro, ¿es donde ahora mismo pone "http://mariamm.lacoctelera.net"?, porque es lo único que se me ocurre.
Y además, una vez ahí,¿que?.
Esto es condenadamente complicado.
14 Julio 2009 | 01:48 AM