comparte el articulo 

El uso de menús en nuestro sitio web y su influencia en la navegación

Actualizado el 05/10/2013 < > 3 Cometarios

Resumen: En este artículo nos enfocamos en el estudio del CSS para lograr, paso a paso, la realización de un menú adecuado al diseño de nuestras páginas web.

En este  artículo nos hemos enfocado en el estudio del CSS para dar consejos que nos permitan lograr, paso a paso, el buen uso de este lenguaje y administrar el diseño  de nuestras páginas web, logrando manipular el espacio a nuestro favor y jugando con la amplia gama de posibilidades que nos ofrece, en este artículo hablaremos de la influencia del estilo en la navegación y accesibilidad de nuestro sitio de internet.

Para seguir esta guía, conviene leer antes el capítulo sistema de navegación de una página web.

Hemos visto, mencionado y resaltado en nuestros artículos anteriores, como el diseño de nuestros sitios web puede marcar la diferencia entre atraer o no a los internautas que llegan por primera vez a nuestro portal. Esa primera impresión es capaz de crearnos un grupo de seguidores que en un futuro se puede convertir en un buen mercado, lo que influirá para atraer inversionistas y empresas que deseen publicitarse con nosotros,  o bien, por el otro lado nos hará ir perdiendo clientes potenciales que es exactamente lo contrario a lo que buscan estos anunciantes.

Incluso, muchas veces no queremos crear un sitio web que venda espacios, quizás nosotros sólo deseamos dar a conocer nuestra idea o producto en la web sin necesidad de ofrecer nuestro servicio de publicidad y cobrar por ello, sin embargo en estos casos un mal diseño también puede influir para hacer que esta idea o este producto llegue a quedar con una mala imagen si no lo exponemos adecuadamente y con las herramientas apropiadas.
Para lograr llegar a esa diferencia positiva hay que tener siempre en cuenta dos factores muy importantes, la accesibilidad y la navegación a través de nuestro sitio, en las cuales influirá el estilo y el diseño.

La navegación web es una de los principales elementos que podemos mejorar y adecuar con las hojas de estilo, esto se ve reflejado en el constante uso de menús y barras para guiar al usuario en las páginas de internet.
El uso de menús permite al usuario de nuestro sistema o al navegante de nuestro sitio, desplazarse a través del árbol conformado por todos los elementos web, páginas de contacto, de información, de productos, de compras, de dudas, búsquedas, etcétera. Es importante darle acceso a todas y cada una de estas secciones para que toda los datos que el requiera estén a su alcance de manera rápida y sencilla.

Existen miles de sitios minimalistas en la red donde todo se logra exponer en una o dos páginas, esto en principio suena muy bien y si tenemos la oportunidad de hacerlo es una buena práctica, sin embargo muchas veces esto no se puede adecuar a nuestro sitio quizás por disposición del mismo cliente o por necesidad de presentar más información y/o productos, tenemos que ver el enfoque de nuestro sitio como algo relevante para guiar la navegación; ya que, no es lo mismo guiar a un usuario a través de un sitio de compras a guiarlo en una página personal o blog.

Por ello, debemos de realizar un esfuerzo a la hora de diseñar un menú y no simplemente tomarlo como un paso más, debemos planearlo y codificarlo de tal manera de que el producto sea efectivo y sobre todo útil para los internautas.  La creación de menús de navegación con CSS es un tema creativo, con muchas formas de explotarse y que nos permitirá desplegar nuestras ideas para que los usuarios se sientan cómodos en nuestra página.

Pasos para hacer un menú web eficaz

Existen cientos de galerías y códigos en internet para obtener menús desplegables, horizontales, verticales,  transparentes, con hijos, sin hijos, etc., es cuestión de buscar y con la ayuda de Google tendremos en la “palma” de nuestra computadora un sinfín de menús que lucirían fantásticos en nuestros sitios, esto no es ninguna novedad, pero que pasa si deseamos ir más allá y queremos empezar a diseñar nuestros propios menús y nosotros mismos manipular cada aspecto y saber el para qué y cómo de las cosas, para ello hay que empezar con la estructura la cual se irá formando tomando en cuenta varios puntos.

Elegir el lenguaje web para el menu

En primer lugar debemos definir con que lenguaje haremos nuestro menú, como ya mencionamos en nuestro caso usaremos únicamente CSS por ser el lenguaje en el que nos estamos adentrando actualmente y debido a su sencillez y fácil ejecución. Se puede optar por crear menús en otros lenguajes o mezclar estos con el propio CSS, como es el caso de Javascript, el cual se ha convertido en la mejor opción para hacer menús dinámicos ligeros que muestren los “hijos” o sub-secciones de las páginas principales, para ello el uso de librerías como jQuery o mootools nos puede ahorrar unas cuantas horas de trabajo.

Otra opción puede ser usar la herramienta Flash, de Adobe, pero ya dependerá del enfoque que le queremos dar, como mencione anteriormente todo varía según la navegación que  corresponde al tipo de nuestro sitio.

Estructura básica del menú de navegación

La estructura básica en XHTML para nuestro menú será la siguiente:

<div id="menu">
  <ul>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
  </ul>
</div>

Estos son los cimientos sobre los cuales construiremos el resto del proyecto, como podemos ver se trata simplemente de una lista desordenada (unordered list) que contendrá el número de “ítems” o secciones que queremos mostrar en el menú los cuales están resguardados dentro de las etiquetas “<li>”.  Sin agregar un estilo, esto se vería nada más como una lista con viñetas de punto en nuestro navegador, pero ahí es donde empieza a hacer su trabajo el CSS.

Añadiendo estilos CSS

Debemos declarar la propiedad “inline-block” para los ítem del id #menu en nuestro CSS, así todo el texto dentro de las etiquetas “<li>” se acomodaran dentro de una sola línea sin que exista saltos entre ellos; es decir, al momento de definir esta propiedad en el navegador veremos una lista pero ahora de manera horizontal y sin decoración, aunque esto puede variar si nosotros se la agregamos. Para lograr esto basta con agregar las siguientes líneas en nuestro código:


#menu ul li {
  display: inline;
  }

Al momento de definir la propiedad “inline-block” también podemos agregar otras como padding para separar cada elemento por cierta distancia dada en pixeles, si yo indico algo como “padding-left: 15px;” existirá un espacio de 15 píxeles a la izquierda de cada elemento de la lista. Con “inline-block” podemos agregar width y height para definir el tamaño del elemento, es por ello que en este caso lo usamos en vez de “inline”, que aunque a simple vista parecen la misma propiedad, al usar “inline” no se puede dar ancho ni altura a los elementos de la lista.

También podemos irle dando estilo a nuestro menú agregando atributos como fuentes y colores.


#menu a {
  height: 20px;
  font-family: Helvetica;
  font-size: 18px;
  color: #CCCCCC;
  }

Con el código anterior las letras de nuestro menú ahora se mostrarán con una Font (fuente) llamada Helvética, muy utilizada por los diseñadores, en color gris bajo y un tamaño de 18 píxeles. De igual manera podemos hacer que la lista se muestre exactamente en el inicio del div menú, esto lo podemos lograr quitando de la siguiente manera, los márgenes y padding que se agregan por default.


#menu ul {
  margin: 0;
  padding: 0;
  }

Con ello tenemos definida la estructura del menú, este div lo podemos incrustar dentro de otro div “contenedor” y asi centrarlo o colocarlo en el lugar donde queremos que luzca. Para poder realizar una menú vertical básicamente se hace lo mismo sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo que deseemos a nuestro menú podemos manejar fondos, sombras, eventos y demás, en los siguientes artículos daremos ideas para decorar y hacer más presentables nuestros menús.

Pincha aquí para ver el menú en funcionamiento.

Publicado el 02/03/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Ing. Daniel Ernesto Navarro Herrera de OK Hosting Mexico

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Mauricio

    Buen artículo, solo decir que se te olvido poner el link para ver el menú en funcionamiento.

    Saludos

    Miércoles, 3 de marzo 2010

  2. Verónica Milán

    Gracias por el aviso Mauricio, se me había pasado ese detalle, ya está corregido.

    Un saludo.

    Jueves, 4 de marzo 2010

  3. Introducción al uso de capas con CSS y XHTML / HTML

    […] por ejemplo, los logotipos suelen colocarse en la parte superior izquierda de la página, los menús de navegación debajo del encabezado o en la columna izquierda de la página (o en ambos lados en caso de sitios […]

    Miércoles, 7 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras