Las barras de menús

Poner una barra de menús (feo plural) horizontales es algo bastante simple, el código CSS está ampliamente difundido, en este caso particular, me basé en uno de Dynamic Drive para ahorrar tiempo pero puede ser cualquier otro. En el mismo sitio hay muchos más modelos gráficos que pueden adaptarse a diferentes diseños de plantillas.

Una barra se hace utilizando una lista (etiquetas UL y LI) a la que se les establecen propiedades específicas para darles el formato deseado.

Esta es una lista normal:

• AAAAAAA
• BBBBBBB
• CCCCCCC

<ul>
 <li>AAAAAAA</li>
 [.......]
</ul>

Esta es una lista donde al elemento LI {} se le establece la propiedad display como inline:

• AAAAAAA
• BBBBBBB
• CCCCCCC
  

Ahora, establecemos las propiedades de la etiqueta UL {}:

float: left;
width: 100%;
margin: 0;
padding: 0;
[... propiedades de color, bordes y fuentes ...]

• AAAAAAA
• BBBBBBB
• CCCCCCC

Como cada uno de los textos, serán vínculos, debemos establecer las propiedades de estos LI A {}:

float: left;
padding: 10px; /* cuánto se va a separar el texto de los bordes */
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF; /* raya vertical de separación */

• AAAAAAA
• BBBBBBB
• CCCCCCC

Ahora, sólo falta establecer las propiedades del efecto rollover sobre los vínculos A para que funcione en Internet Explorer ya que este navegador no permite este tipo de efecto sobre otros elementos.

Así que debemos establecer las popiedades para la etiqueta LI A:hover {}:

color: #FFFFFF !important; /* forzamos el cambio de color del texto del vínculo */
background-color: #BF0000; /* cambiamos el color del fondo */

• AAAAAAA
• BBBBBBB
• CCCCCCC

Pero claro, en lugar de colocar un color de fondo, podemos colocar una imagen. Una, será la imagen "NORMAL", la que se verá siempre (SolapaNormal.gif) y la otra, la que producirá el efecto rollover (SolapaActiva.gif) cuando pongamos el mouse encima de cada item de la lista.

En la etiqueta UL debe establecerse la propiedad background con la imagen normal que centramos y repetimos como tile horizontal:

background: #004080 url(SolapaNormal.gif) center center repeat-x;

• AAAAAAA
• BBBBBBB
• CCCCCCC

Y en la etiqueta LI A:hover establecemos la propiedad background con la imagen del rollover:

background: #004080 url(SolapaActiva.gif) center center repeat-x;

• AAAAAAA
• BBBBBBB
• CCCCCCC

Para que todo sea más simple, creamos las clases CSS necesarias y las colocamos en la sección de estilo de la plantilla:

.solapamenu {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  background: black url(URL_SolapaNormal) center center repeat-x;
  [... propiedades de color, bordes y fuentes ...]
}

.solapamenu li {display: inline;}

.solapamenu li a, .solapamenu li a:visited {
  float: left;
  padding: 10px;
  text-decoration: none;
  [... propiedades de color, bordes y fuentes ...]
}

.solapamenu li a:hover {
  background: transparent url(URL_SolapaActiva) center center repeat-x;
  [... propiedades de color y fuentes ...]
}

Finalmente, debemos definir dos cosas, qué queremos mostrar y dónde ubicamos la barra.

Hay muchos ejemplos de barras donde las solapas se corresponden con las etiquetas, incluso hay widgets específicas para esto.

La limitación de este tipo de solución es que la barra se torna incontrolable ya que, si las etiquetas son muchas o se van modificando, la barra se va adaptando con consecuencias imprevisibles.

Mi idea fue independizarme totalmente de las etiquetas (algo que siempre me ha parecido muy poco práctico) y crear una serie de post especiales que contuvieran un índice personalizado. Por supuesto, hay una solución intermedia que es utilizar como vínculos, sólo ciertas etiquetas. Esto se consigue poniendo con la siguiente URL:

URL_BLOG/search/label/ETIQUETA/

Dependiendo de la estructura de cada plantilla, la barra puede ubicarse como parte del header o debajo de este.

Este es el código normal de una plantilla Mínima:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Probando Blogger Beta (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
 <h1 class='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
       <data:title/>
    <b:else/>
       <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
 </h1>
</div>
<div class='descriptionwrapper'>
 <p class='description'><span><data:description/></span></p>
</div>

[... POSIBLE UBICACION 1 ...]

</b:includable>
</b:widget>
</b:section>
</div>

[... POSIBLE UBICACION 2 ...]

En cualquiera de los dos casos, el código principal es el mismo:

<ul class='solapamenu'>
 <li><a href=''URL_blog/index.html'>Inicio</a></li>
 <li><a href='URL_vinculo'>VINCULO</a></li>
 [... tantas etiquetas LI como vínculos se quieran poner ... ]
</ul>
<br style='clear: left'/>

En el primer caso, el código se inserta sin más trámite. En el segundo caso, deberíamos ubicarlo dentro de un bloque DIV:

<div id="menuSolapas" style="width: 100%; height: VALORpx">
 [... el código anterior ... ]
</div>

donde debemos tratar de calcular la altura de la barra (VALORpx) que dependerá del padding usado y del tamaño de las fuentes. Una forma simple de hacerlo es colocarla en la plantilla, usar la VISTA PREVIA, capturar la ventana con ALT+PrintScreen y medir el sector con cualquier procesador de imágenes.