Unidad 10. JavaScript (II)

10.2. Cambiar el CSS

Vamos a completar nuestro menú desplegable, que de momento sólo tenemos en la página flores/silvestres.html de nuestro ejemplo.

En CSS, existe la propiedad visibility, que determina la visibilidad del elemento, con tres posibles valores:

• visible: Muestra el elemento. Es el valor por defecto.
• hidden: Oculta el elemento.
• collapse: Se aplica e elementos de tabla, por ejemplo a una fila. La oculta contrayéndola.

Aunque ocultemos el elemento con esta propiedad, se sigue reservando su espacio. Para ocultar un elemento, y que además no quede su hueco, podemos utilizar display: none;. En este caso, para volver a mostrarlo utilizamos display: block;, ya que esto se hace principalmente con elementos de bloque (capas, tablas, listas...).

Lo que vamos a hacer, es utilizar JavaScript para cambiar la visibilidad del elemento, mostrándolo cuando tengamos el cursor sobre la pestaña Flores, y ocultándolo cuando salgamos de ella.

Como al cargar la página, el submenú estará oculto, le damos ese valor (display: none;) a su selector (#menu ul) de la hoja de estilo.

Ahora, utilizaremos javascript para mostrar el elemento.

Lo primero es referenciar al elemento. Disponemos del método getElementById('id_del_elemento'), que nos permite referenciar un elemento de la página con indicando su ID.

Como nuestro submenú no tiene un ID, le vamos a asignar el ID sub_flores.

Por lo tanto, para referenciar a nuestro submenú, escribiríamos en el código javascript document.getElementById('sub_flores'). Ponemos document, porque es el nombre del objeto al que pertenece el método. El objeto document se refiere al contenido del body de nuestra página.

Una vez referenciado un elemento, podemos acceder a sus atributos, poniendo . (punto) detrás del elemento.

Por ejemplo si ejemplo fuese el ID de una imagen, podríamos cambiar su ancho a 200 px con:
document.getElementById('ejemplo').width='200px';

Del mismo modo, podríamos cambiar su clase por otra utilizando:
document.getElementById('ejemplo').class='nuevaclase';

Con .style. podemos acceder a las propiedades de estilo. Por ejemplo, podríamos cambiar el color del texto del párrafo parrafo con:
document.getElementById('parrafo').style.color='#00ffaa';

Por lo tanto, la instrucción javascript que mostraría nuestro submenú podría ser:

document.getElementById('sub_flores').style.display='block';

Cuando llamemos a esa línea de código, el menú se mostrará. ¿Y cuando lo haremos? Cuando el cursor esté sobre la pestaña Flores. Esto produce un evento. JavaScript dispone de una serie de eventos sobre los elementos de la página, es decir, una serie de acciones que permiten hacer algo cuando son detectadas. Por ejemplo:

• onclick. Se produce al hacer clic sobre un elemento.
• onmouseover. Se produce al poner el cursor sobre un elemento.
• onmouseout. Se produce cuando el cursor está fuera del elemento.

Puedes ver los eventos existentes y cuándo se producen en este avanzado .

Los eventos se colocan en el elemento que queremos que los produzcan, como si fuesen atributos HTML. En nuestro caso, queremos que el menú se muestre cuando el cursor esté sobre la pestaña Flores, es decir, en el evento onmouseover del li. Como valor del atributo, escribimos el código JavaScript. Por tanto, quedará:

<ul id="menu">
 <li><a href="../index.html">Inicio</a></li>
 <li class="activa" onmouseover="document.getElementById('sub_flores').style.display='block';"><a href="index.html">Flores</a>
  <ul id="sub_flores">
  ...
  </ul>
 </li>
  ...
</ul>

Si lo pruebas, verás que el submenú se muestra, pero queda siempre visible. Tenemos que ocultarlo (display: none;) cuando el cursor abandone el elemento (onmouseout;)

<ul id="menu">
 <li><a href="../index.html">Inicio</a></li>
 <li class="activa" onmouseover="document.getElementById('sub_flores').style.display='block';" 
   onmouseout="document.getElementById('sub_flores').style.display='none';">
  <a href="index.html">Flores</a>
  <ul id="sub_flores">
  ...
  </ul>
 </li>
  ...
</ul>

Si lo pruebas, verás que a no ser que lo hagas muy deprisa, al pasar el cursor de la pestaña al submenú éste desaparece. Esto se debe a que el menú permanece visible siempre que no salgamos de sus elementos (que están dentro del <li> de la pestaña). Como en los elementos (#menu ul li) tenemos un margen superior de 2px, hace que al pasar sobre él nos quedemos fuera. Así que para solucionarlo, ponemos el margen superior a 0 (margin: 0 0 0 -10px;). Para simular el margen, y que haya una pequeña separación entre elementos, aumentamos su alto en 2px (height: 32px; line-height: 32px;).