Menu lista vs Imagen sustitución

[esteiro]

Buenos días, soy nuevo en el foro y un principiante completo en el diseño web.
Estoy haciendo mi primera web y el foro me ha venido de perillas para aprender.
No tengo muchos (o nada) conocimientos de programación.

Bueno, ahí va mu pregunta. Hay multitud de maneras de hacer un menú de navegación. Las maneras que más me convencen:
- Listas: Pros, es texto "fácil". Pero por contra creo que tengo que crear demasiadas "clases" para hacer que los botones se comporten como yo quiero (al pasar el ratón y que cambien el fondo cuando estén activos).
- Tablas o capas con imágenes de sustitución: Con imágenes. Muy fácil y se comportan exactamente como yo quiero, con la tipología que necesito. Inconveniente. ¿Memoria y tiempo en cargarse las imágenes?

Mi duda es esa, no sé de qué modo trabajar mejor. Me decanto por el tema de las imágenes de sustitución, pero ¿tardará mucho en cargarse las imágenes? ¿Ocupa mucho mayor espacio?

Muchas gracias de antemano !!

[cristian_cena]

Los menús se crean con listas no ordenadas. Este es el modo ya que resultan más fáciles de hacer/editar y más semánticos.
Las tablas se ocupan para mostrar listados de registros que traemos por ejemplo de una base de datos, también llamados "datos tabulares".

Acá hay varios que podes analizar y usar: http://micromit.net/2010/01/23/css-d...enu-framework/

Con css3 se están logrando efectos muy interesantes:
http://tympanus.net/codrops/2011/10/...imation-menus/
http://tympanus.net/codrops/2011/10/...3-transitions/

[navegantes]

Con listas puedes poner el texto en el html y con css aplicar el fondo.

Las clases son reglas que se pueden aplicar múltiples veces, no tienes que crear una clase por cada opción del menú.

Luego también existe selectores descendientes no hace falta que le pongas una class a todo.

Por ejemplo:

Código CSS:

.lista{color:#0C6;}
.lista li{background:#C03;}
.lista li:hover{background:#069;}
 

Código HTML:

<ul class="lista">
<li>Opcion1</li>
<li>Opcion2</li>
</ul>
 

Con lo que ves inicialmente el texto de cada <li> tiene un color. Los selectores descendientes sería la segunda linea, la que da el background. Aquí igual no tiene mucha lógica pero si el ejemplo fueran párrafos dentro de un <div> le daría el color de fondo a cada párrafo y no a toda la caja.

Finalmente tienes hover. Eso te permite cambiar el color de fondo cuando se pasa el puntero por encima. Color o imagen o lo que sea.

En resumen, que tampoco tienes que escribir tantas clases.

El tema de las imágenes de sustitución. Si montas la imagen en el mismo archivo irá más fluido ya que en cuanto la imagen se carga ambas partes lo están. No suele suponer mucho peso.

Para gestionar una imagen de fondo te puede servir esto.

Código CSS:

.lista li{ background:url(imagen.gif) 0px 0px no-repeat;}
.lista li:hover{ background:url(imagen.gif) 0px -27px no-repeat;}
 

En este caso la imagen ocuparía 54px de alto. Los primero 27px sería el fondo en reposo y los otros 27px de alto sería el fondo activado. Simplemente se le dice al navegador que desplace la imagen.

Espero que esto te sirva un poco de ayuda.