Creación de páginas web desde cero (8 Menus)
En este tutorial podréis ver cómo crear un menú simple para vuestras páginas web que no requiere grandes conocimientos de programación.
Por otro lado este menú no será ni mucho menos tan flexible como el que se muestra en el articulo Menu PHP + XML + JQuery + JavaScript + CSS. Pero tampoco requeriréis conocimientos de PHP ni de JQuery ni de JavaScript para hacerlo, lo cual es una ventaja para aquellos que estáis empezando en esto.
En esencia se construirá todo el menú utilizando estilos CSS, y podréis ver entre otras cosas que podéis mostrar y ocultar etiquetas dependiendo de vuestras necesidades.
Existen dos formas de ocultar etiquetas : "display:none" y "visibility:hidden". Con la propiedad "display" ya hemos visto que podemos hacer varias cosas, y una de ellas es ocultar etiquetas, de todas formas y aunque es mas compatible con navegadores viejos considero que es mejor utilizar la propiedad "visibility" ya que la propiedad display puede que la necesitemos para otras cosas en la misma etiqueta. Por esa razón en este ejemplo se utilizara la propiedad "visibility" a la hora de mostrar y ocultar etiquetas.
De todas formas estas propiedades no hacen exactamente lo mismo, si por ejemplo hacemos "display:none" en un elemento, este elemento al estar oculto no ocupara espacio, por el contrario si utilizamos "visibility:hidden" aunque no se vea el elemento el navegador reservara su espacio mostrándolo en blanco.
En esencia cada menú consistirá en tres etiquetas, la primera "MenuPadre" será la encargada de mostrar el titulo para el menú y de contener dentro una segunda etiqueta a la cual llamaremos "SubMenu". La etiqueta "SubMenu" representara un marco oculto donde ubicaremos todos los enlaces que queramos mostrar, estos enlaces irán en una tercera etiqueta llamada "SubMenuItem" de forma que queden resaltados al pasar el mouse por encima.
| MenuPadre | : Menú que mostrara el titulo y que al pasar por encima mostrara el "SubMenu". |
| SubMemu | : Marco inicialmente oculto que contiene los "SubMenuItem" con los enlaces. |
| SubMemuItem | : Espacio que ocupara el texto para un enlace dentro de un "SubMenu". |
Hay que destacar que a las clases "SubMenu" se les asignara la propiedad "position:absolute" ya que de esta forma no ocuparan espacio, y se mostraran por encima de los elementos que puedan tener debajo.
Vista la estructuración del menú pasemos a ver sus estilos css :
/* Clase para crear un marco con borde negro y fondo gris */.Marco {border-color:rgb(0, 0, 0);border-style:solid;border-width:1px;padding:3px;background-color:rgb(200, 200, 200);}/* Clase que representa el menu padre */.MenuPadre {display:table;margin-right:5px;cursor:pointer;}.AlinearIzquierda { float:left; } /* Clase para alinear etiquetas a la izquierda */.SubMenu { position:absolute; } /* Clase que representa un sub-menu */.MenuPadre .SubMenu { visibility:hidden; } /* Por defecto los submenus dentro de menu padre estan ocultos */.MenuPadre:hover .SubMenu { visibility:visible; } /* Al resaltar el menu padre, los submenus de dentro de hacen visibles *//* Clase que representa un enlace RESALTADO */.SubMenuItem:hover {cursor:pointer;background-color:rgb(240, 240, 240);}
Para empezar se define una clase "Marco" en la que le asignamos un borde negro y un color de fondo gris, esta clase será utilizada en elementos con la clases "MenuPadre" y "SubMenu" para mostrar las propiedades mencionadas.
En segundo lugar definimos la clase "MenuPadre" con la propiedad "display:table" lo que ajustara su tamaño únicamente al tamaño que necesite para mostrar los elementos que contiene. Además le ponemos un margen a la derecha de 5 pixeles para que no se nos queden pegados los menús padre, y le asignamos la propiedad "cursor:pointer" para que el cursor del mouse cambie su aspecto por una mano con el dedo índice levantado al pasar por encima del objeto.
En la línea 16 tenemos la clase "AlinearIzquierda" que únicamente contiene la propiedad "float:left" la cual se asignara a todos los menús padres menos el ultimo.
En la línea 17 definimos la clase "SubMenu" con la propiedad "position:absolute". Al definir su posición absoluta, el navegador no utilizara espacio extra del documento para esta etiqueta, y lo que hará es mostrarla por encima de los elementos que puedan haber debajo. Esta propiedad es muy importante ya que si no la asignamos, al mostrarse el sub-menú se movería todo el documento hacia abajo para dejarle espacio a la etiqueta "SubMenu".
En la línea 18 definimos que las clases "SubMenu" dentro de las clases "MenuPadre" tienen la propiedad "visibility:hidden" o dicho de otra forma que todos los sub-menús inicialmente estarán ocultos.
En la línea 19 definimos que cuando se pase por encima de "MenuPadre" la clases "SubMenu" dentro del padre pasaran a tener la propiedad "visibility:visible" por lo que se mostrara el submenú dentro del padre.
Y por ultimo en la línea 22 definimos la clase "SubMenuItem" solo para cuando pasemos el mouse por encima, lo que cambiara el color del fondo para hacer un pequeño efecto de resaltado. Además también cambiamos el puntero del mouse, por la mano con el dedo índice levantado.
Explicados los estilos CSS y visto el ejemplo solo nos queda ver la disposición de las etiquetas en HTML :
<div class='MenuPadre AlinearIzquierda Marco'> <!-- Menu padre alineado a la izquierda --><div>Menú padre 2</div> <!-- Titulo del menú padre --><div class='SubMenu Marco'> <!-- Marco para el submenu inicialmente oculto --><div class='SubMenuItem'>Sub Menú 1</div><div class='SubMenuItem'>Sub Menú 2</div><div class='SubMenuItem'>Sub Menú 3</div><div class='SubMenuItem'>Sub Menú 4</div></div></div><div class='MenuPadre Marco'> <!-- Menu padre sin alineación --><div>Menú padre 3</div> <!-- Titulo del menú padre --><div class='SubMenu Marco'> <!-- Marco para el submenu inicialmente oculto --><div class='SubMenuItem'>Sub Menú 1</div><div class='SubMenuItem'>Sub Menú 2</div><div class='SubMenuItem'>Sub Menú 3</div></div></div><br /><br /><br />
Para no hacer muy grande el cuadro de código se ha mostrado solo la creación de los dos últimos menús, especialmente para que os fijéis que en el "Menu padre 2" se utilizan las clases "MenuPadre AlinearIzquierda Marco" y que en el "Menu padre 3" solo se utilizan las clases "MenuPadre Marco". Porque no se ha incluido la clase "AlinearIzquieda" al último menú padre? la respuesta es que si la alineamos a la izquierda el siguiente elemento que se encuentre en la página web quedaría ubicado a la derecha del menú, y dudo mucho que queramos este resultado. De esta forma al no especificar la clase "AlinearIzquierda" el siguiente elemento después del menú quedara ubicado justo debajo del menú.
Otra cosa más! en estos ejemplos no he añadido ningún tipo de enlace, pero no debería resultaros difícil, hay 2 opciones :
<a href='www.MiUrl.com'><div class='SubMenuItem'>Sub Menu 1</div></a>
<div class='SubMenuItem'><a href='www.MiUrl.com'>Sub Menu 1</a></div>
La mejor opción es la primera, es decir poner el "div" dentro del enlace, ya que si lo hacemos al revés y pulsamos sobre una parte del menú que no tenga texto, el enlace no funcionara aunque el "SubMenuItem" se vea resaltado. Dicho de otra forma si ponemos la etiqueta "div" dentro de la etiqueta "a" estamos indicando que si se presiona dentro del div hay que ir al enlace, en cambio si lo hacemos al revés, es decir ponemos la etiqueta "a" dentro de la etiqueta "div" estamos indicando que al presionar SOBRE EL TEXTO hay que ir al enlace.
Y con esto terminamos la octava entrega del tutorial, si lo deseáis podéis ver el ejemplo online simplificado o descargar el ejemplo para poder editarlo en vuestro ordenador.
| Ver Ejemplo | Descargar Ejemplo |
Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (9 Tipografías).