Ejemplo de maquetación de una página web (segunda parte)

En la segunda parte, desarrollaremos y posicionaremos el menú horizontal de la página web.

El menú

En este ejemplo hemos optado por un menú horizontal simple, aunque es posible desarrollar un menú desplegable utilizando HTML y CSS o alguno de los muchos existentes con JavaScript o alguna de sus librerías. También es posible insertar elementos en Flash, ya que el posicionamiento es igual para todo tipo de elementos.

En primer lugar, observemos que el menú contiene una faja oscura con sombra que se superpone a la imagen principal y al logotipo. Luego de esta faja, se desprende el menú propiamente dicho. Todos los elementos están contenidos dentro de una capa, la que para que se consiga la superposición sobre el resto de los elementos, tiene posicionamiento absoluto. Debemos recordar que cuando le damos posicionamiento absoluto a un elemento contenido dentro de una capa que tiene posicionamiento relativo (tal es el caso del ejemplo, ya que la capa “menú” se encuentra dentro de la capa “imagen”, que tienen valores “absolute” y “relative” en su atributo “position”), se posiciona con los valores que le otorguemos a los atributos “top”, “left”, “right” y “bottom” respecto de la capa que le contiene.

<div id="imagen"><!-- contenedor del slide-->
        <div id="menu"><!-- contenedor del menu-->
        </div>
    </div>

#imagen  {
  width: 960px;
  margin: 0 auto;
  position: relative;
  }

#menu {
  position: absolute;
  width: 100%;
  padding: 0;
  background: url(../imagenes/fondo-menu.png) repeat-x;
  }

Como podemos ver en el código CSS que mostramos arriba, ya se ha determinado el fondo de la capa “menú”, que compone la faja con sombra que ocupa todo el ancho. A continuación, compondremos el menú propiamente dicho, para lo que emplearemos listas. Pero el menú tiene dos imágenes en cada punta del mismo que le dan el aspecto redondeado. Para generar este efecto, hemos ubicado dos capas, una antes y otra después de la lista, por lo que la base del código html del menú será el siguiente:

<div id="menu-izq"></div><!--Punta redondeada izquierda del menu-->
          <ul><!-- menu -->
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Empresa</a></li>
            <li><a href="#">Ofertas</a></li>
            <li><a href="#">Pedidos</a></li>
            <li><a href="#">Contacto</a></li>
          </ul>
          <div id="menu-der"></div><!--Punta redondeada derecha del menu-->

Ahora debemos hacer que estos tres elementos se ubiquen en forma horizontal y contigua, además de ubicarse más abajo que la parte superior de la capa “menú” para que tenga la apariencia que es un saliente de la misma. Para ello, simplemente daremos un margen superior de 30px al elemento “ul”, y para que aparezca retirado del margen izquierdo, le daremos un margen izquierdo de 350px:

#menu ul  {
  padding: 0;
  margin: 30px 0 0 350px;
  list-style: none;
  }

Las capas que contienen las imágenes de las puntas del menú, ambas son flotantes a la izquierda, y le damos ancho y altura definidos para que sean visibles. Al igual que la lista, se le debe determinar un margen superior de 30px para que queden a la misma altura que los ítems. A la capa de la izquierda le damos un margen izquierdo de 330px, de modo que cuando le sumemos el ancho de la misma, nos coincida con el margen que le hemos dado a la lista y aparezcan contiguas. A la capa de la derecha no es necesario darle margen izquierdo, ya que se ubicará al final de todos los elementos flotantes, es decir, a continuación del último ítem del menú.

#menu-izq, #menu-der  {
  float: left;
  height: 50px;
  width: 20px;
  background: url(../imagenes/fondo-menu-izq.png);
  }
  
#menu-izq {
  margin-left: 330px;
  margin-top: 30px;
  }
  
#menu-der  {
  background: url(../imagenes/fondo-menu-der.png);
  }

Ahora determinaremos las propiedades de los ítems de la lista, que simplemente consisten en determinar que se trata de un elemento flotante y el fondo que llevará. También hemos colocado la altura, algo que más adelante mostraremos su utilidad en este caso.

#menu li {
  float: left;
  height: 50px;
  background: url(../imagenes/fondo-menu-a.png) repeat-x right 0px;
  }
  
#menu ul li:hover { 
  background: url(../imagenes/fondo-menu-a.png) repeat-x right -50px; 
  }

Como sabemos, los elementos que componen un menú son enlaces, los que tienen características propias que deben ser determinadas. Además de los atributos que determinan la fuente y su color, encontramos que hemos decidido que se comporte como bloque. Esto se hace para que cuando el puntero pase por cualquier punto que se encuentre dentro del relleno o la altura (line-height), el enlace aparecerá activo.

Pero lo usual es que la altura del elementos li (Ver código anterior) y el elemento de la línea de texto (line-height) no coinciden. Esto se debe a que, como se trata de una imagen con transparencia en su parte inferior, si diéramos un “line-height” de la misma dimensión que la altura del ítem de lista, el texto aparecería muy cerca de donde comienza la parte transparente de la imagen, y quedaría como si se hubiera ubicado el texto en la parte inferior de la imagen.

#menu ul li a {
  line-height: 30px;
  color: #ccc;
  padding: 0 20px;
  margin: 0;
  display: block;
  font-family: verdana;
  text-decoration: none;
  }
  
#menu ul li a:hover {
  color: #fff;
  }
  
#menu ul li a:visited {
  color: #ccc;
  }

Con esto hemos finalizado la parte superior de la página web, que era lo que resultaba interesante del ejemplo presentado, ya que contiene varios elementos superpuestos, incluyendo un menú simple.