De menús expandibles y navegadores confundidos

Cuando diseñamos nuestra página y la probamos en otro navegador, lo normal es que no funcione correctamente ¿Por qué? simplemente porque cada uno de ellos interpreta las instrucciones de diferente manera.

Eso es lo que decía hace un tiempo en Firefox, IE6, IE7, todos distintos y eso es lo que sigo diciendo ahora.  Y no sólo se trata de propiedades o instrucciones que algunos entienden y otros no sino que, aún siendo etiquetas comunes, cada uno hace con ellas lo que quiere.

Los comentarios de Jabba y su odisea en busca de un menú que funcione normalmente, son uno de los ejemplos más claros de este problema.

Y es que, lo que quiere hacer, tener un menú que se expanda con submenues, es algo normal, simple, bastaría tener listas anidadas pero claro, las etiquetas de las listas son de las más retorcidas; personalmente, recién hace poco logré que las listas de la sidebar se vieran correctamente en Internet Explorer, tardé casi un año pero ... ¿quién tiene apuro?

No tengo reglas o consejos que aportar, sólo tres ejemplos de menúes desplegables que funcionan tanto en Firefox como en Internet Explorer.

Las dos primera son ejemplos realizados por CSSplay y, si bien sólo emplean propiedades CSS, cualquiera que los analice, verá que el código HTML está plagado de comentarios condicionales para que ciertas cosas se vean en IE6 y otras en IE7.

Professional drop-down using images ha sido verificado en IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari.

Descargar el ZIP que contiene un ejemplo, las imágenes y la página de estilo necesaria.

• Home
• Products
  • Cameras
    • Nikon
    • Minolta
    • Pentax
  • Lenses
    • Wide Angle
    • Standard
    • Telephoto
    • Zoom
      • 35mm to 125mm
      • 50mm to 250mm
      • 125mm to 500mm
    • Mirror
    • Non standard
      • Bayonet mount
      • Screw mount
  • Flash Guns
  • Tripods
  • Filters
• Services
  • Printing
  • Photo Framing
  • Retouching
  • Archiving
• Contacts
  • Support
  • Sales
    • USA
    • Canadian
    • South American
    • European
      • British
        • London
        • Liverpool
        • Glasgow
        • Bristol
          • Redland
          • Hanham
          • Eastville
        • Cardiff
        • Belfast
      • French
      • German
      • Spanish
    • Australian
    • Asian
  • Buying
  • Photographers
  • Stockist
  • General
• Privacy Policy

Professional drop-down using images and text es una variante del anterior, mucho mas sofisticado porque incluye imágenes en cada subitem y ha sido verificado en IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari.

Descargar el ZIP que contiene un ejemplo, las imágenes y la página de estilo necesaria.

• Home
• Products
  • Cameras
    • Nikon
    • Minolta
    • Pentax
  • Lenses
    • Wide Angle
    • Standard
    • Telephoto
    • Zoom
      • 35mm to 125mm
      • 50mm to 250mm
      • 125mm to 500mm
    • Mirror
    • Non standard
      • Bayonet mount
      • Screw mount
  • Flash Guns
  • Tripods
  • Filters
• Services
  • Printing
  • Photo Framing
  • Retouching
  • Archiving
• Contacts
  • Support
  • Sales
    • USA
    • Canadian
    • South American
    • European
      • British
        • London
        • Liverpool
        • Glasgow
        • Bristol
          • Redland
          • Hanham
          • Eastville
        • Cardiff
        • Belfast
      • French
      • German
      • Spanish
    • Australian
    • Asian
  • Buying
  • Photographers
  • Stockist
  • General
• Privacy Policy

El tercer ejemplo es el más simple y es al que hace referencia Jabba: CSS Horizontal List Menu que, a diferencia de los anteriores, utiliza CSS y JavaScript y sólo permite crear un nivel de submenues.

Los archivos originales son cinco: csshorizontalmenu.js, csshorizontalmenu.css, menubg.gif, menubgover.gif y menuarrow.gif.

Sin embargo, para el ejemplo que aquí muestro los he modificado sustancialmente para adaptarlos a un tipo de barra de menúes como la que utiliza el blog y que ya he explicado aquí.

Para utilizarlo en Blogger, debemos subir el script a un servidor externo y luego, agregarlo a la plantilla junto con la hoja de estilo; por ejemplo, antes de la etiqueta </head>:

<script src="direccionURL_MENUkithorizontal.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="direccionURL_MENUkithorizontal.css"/>

La clave de todo está en este último así que aquí va una breve explicación, tratando de mostrar cuáles son las propiedades que podemos personalizar para establecer colores y fondos diferentes.

/* propiedades de la barra horizontal de menues */

.horizontalcssmenu ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
/* esta es la imagen de fondo, puede utilizarse cualquiera o ninguna */
background: color url(URL_imagen) center center repeat-x;
/* aquí podemos agregar otras propiedades de formato como border */
}

/* esta es área de cada una de las entradas del menú horizontal */
.horizontalcssmenu ul li {
position: relative;
float: left;
/* aquí también podemos agregar otras propiedades de formato*/
}

/* propiedades de cada enlace del menú horizontal */
.horizontalcssmenu ul li a {
float: left;
/* propiedades del formato varias (padding, font, color, etc */
}
.horizontalcssmenu ul li a:hover { 
/* esta es la imagen de fondo para lograr el efecto mouseover */
background: color url(URL_imagenHover) center center repeat-x;
}

/* estas son las propiedades de los submenues */

.horizontalcssmenu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 100;
/* establecemos un valor de ancho fijo para que cada entrada esté en una línea*/
width: 150px; /* el valor puede ser cualquiera */
/* otras propiedades de formato*/
}

/* esta es área de cada una de las entradas de los submenues */
.horizontalcssmenu ul li ul li {/
width: 100%;
/* otras propiedades de formato*/
}

/* propiedades de cada enlace del menú horizontal */
.horizontalcssmenu ul li ul li a {
/* ancho fijo (menos padding) */
width: 140px; /* en este ejemplo, 150 - 5 - 5 = 140 */
padding: 2px 5px;  /* conviene establecer un padding para separar los items */
/* otras propiedades de formato*/
}
.horizontalcssmenu ul li ul li a:hover {
/* esta es la imagen de fondo para lograr el efecto mouseover */
background: url(menuHover.gif) center center repeat-x;
}

Ahora, debemos colocar el código HTML de los menúes. Lo hacemos en el lugar de la plantilla donde queremos que aparezca:

<div class="horizontalcssmenu">
<ul id="cssmenu1">

<!-- un item del menú sin expandir -->

<li><a href="direccionURL">TEXTO MENÚ</a></li>

<!-- un item del menú expandible -->

<li>
<a href="#" onclick="return false;">TEXTO SUBMENÚ<></a>
<ul>
<li><a href="direccionURL">ITEM 1</a></li>
<li><a href="direccionURL">ITEM 2</a></li>
<li><a href="direccionURL">ITEM 3</a></li>
</ul>
</li>

</ul>
<br style="clear: left;" />
</div>