un poca mas del tema
utilidad creada por Phatfusion como ImageMenu
Sistema de menús basado en imágenes con desplazamientos laterales, totalmente visible para los spiders, su construcción se basa en una caja que denomina "imagemenu" y los elementos insertados en una lista desordenada (<ul>).
Este menú precisa de dos librerías del Framework: Mootools 1.11 o Mootools 1.2 e ImageMenu (recuerde que es importante el orden en el que se cargan las librerías y siempre debe estar Mootools antes que ImageMenu).
Se han detectado algunos problemas de compatibilidad en Mootools 1.2 para FF3 y Opera en el ImageMenu, siendo correcto el funcionamiento en IE6, IE7 e IE8. Es importante que solo seleccione la versión 1.11 para evitar este problema de compatibilidad.
Ejemplo de parámetros para un menú básico
level=1|skin=css/miimage
Asume un menú desde el nivel 1, usa la hoja de estilos miimage.css situada en su carpeta images/css (se asume siempre images/ como carpeta inicial del usuario)
Definición del estilo para el menú
.imageMenu {
position: relative; /* relativo a la caja inicial */
width: 900px; /* ancho del menú visible total_elementos X ancho_elemento + borde */
height: 100px; /* alto del menú visible */
overflow: hidden; /* ocultar lo que sobra */
}
.imageMenu ul {
list-style: none; /* desactivar estilos para la lista */
margin: 0px; /* sin margen en la caja */
display: block; /* juntar en bloques los elementos */
height: 100px; /* alto predefinido */
width: 1000px; /* ancho predefinido */
}
.imageMenu ul li {
float: left; /* cada elemento a la izquierda */
}
.imageMenu ul li a {
text-indent: -1000px; /* identacion del texto que no se ve */
background:#FFFFFF none repeat scroll 0%; /* fondo generico de los elementos */
border-right: 2px solid #fff; /* borde por la derecha de 2px blanco */
cursor:pointer; /* activar el cursor del dedo */
display:block; /* juntar en bloque cada elemento */
overflow:hidden; /* ocultar lo que sobra */
width:98px; /* tamaño de cada pestaña al iniciar */
height: 100px; /* alto de cada pestaña */
}
.clear {
clear: both; /* limpiar la tabla generada y restablecer */
}
www.sisdatahost.com
Venta Hosting y Dominios
Diseño de paginas Web
Recuerde que en el caso de personalizar el menú es necesario que se suba al servidor a la ruta indicada.