Foros del Web » Creando para Internet » CSS »

como hacer un menu vertical con diferentes imagenes?

Estas en el tema de como hacer un menu vertical con diferentes imagenes? en el foro de CSS en Foros del Web. Pues eso, quiero agregar un menu vertical a una pagina, pero no se como se hace y no encuentro ejemplos, no quiero el tipico menu ...
  #1 (permalink)  
Antiguo 30/09/2009, 23:10
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
como hacer un menu vertical con diferentes imagenes?

Pues eso, quiero agregar un menu vertical a una pagina, pero no se como se hace y no encuentro ejemplos, no quiero el tipico menu que estan todos los botones del mismo color y cambain de color al pasar el raton, lo que quiero es poner, imagenes de los botones con diferentes colores, no importa si no cambian por otra imagen al pasar el raton, si se puede mejor, pero si no, no importa.
Espero que se entienda, lo que quiero utilizar son imagenes en lugar de colores fijos en todos los botones.

Saludos
  #2 (permalink)  
Antiguo 30/09/2009, 23:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como hacer un menu vertical con diferentes imagenes?

no te logro entender
http://www.dynamicdrive.com/style/cs...side_bar_menu/

es que es lo mismo tansolo quitale el css y texto y ponle dicha imagen...
o pon las imagenes que deseas a ver si te podemos armar un ejemplito y luego tu le sigues... pero solo "quiero y tnego" psss ta dificil chao y suerte!...
  #3 (permalink)  
Antiguo 30/09/2009, 23:23
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Gracias por contestar es que no sabia como explicarme, pongo una imagen del menu que quiero hacer.
http://img41.imageshack.us/img41/2944/menunb.png

Por eso decia que son diferentes imagenes y no solo una apra todos los botones.
  #4 (permalink)  
Antiguo 01/10/2009, 02:15
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: como hacer un menu vertical con diferentes imagenes?

Saludos!!

Se me ocurre una forma de hacerlo, es con una lista desordenada, dándole tamaño a los <li>, con clases diferentes y con imágenes de fondo diferentes...

Tienes una muy buena idea del menú eh! Felicitaciones por eso. Espero que entiendas mas o menos como te digo... Habría que hablarle a Mikel para pedirle que agregue algo así a su sitio web. Por ahí dicen que si se le grita duro, aparece...

Suerte con el menu eh! Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 01/10/2009, 03:56
 
Fecha de Ingreso: enero-2009
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Si que es buena la idea del menú, pero... las letras no tendrian que estar al revés? quiero decir.. de abajo a arriba?

Hazlo con CSS y si ves que no puedes dimelo y en cuanto tenga un ratito te lo intento montar :D

Última edición por Jrt_1990; 01/10/2009 a las 03:57 Razón: Falta lo de abajo
  #6 (permalink)  
Antiguo 01/10/2009, 09:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como hacer un menu vertical con diferentes imagenes?

ahora te entiendo... en primera con CSS2 aun no se puede escribir verticalmente así que tocara hacerlo con imágenes...
no veo cual es el problema si sabes hacer las imágenes (ya las tienes hechas)
y sabes hacer un menú convencional...
no entiendo... si por default las listas desordenadas ya vienen en vertical tan solo es cambiar el fondo y el tamaño... chao intenta hacerlo y te ayudamos...

PD: Te vi en truzone jeje
  #7 (permalink)  
Antiguo 01/10/2009, 10:03
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Si, ya lo hice, estaba un poco perdido porque no podia ubicar cada imagen para cada link pero lo resolvi despues de enviar la imagen, gracias a todos :)
  #8 (permalink)  
Antiguo 01/10/2009, 11:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como hacer un menu vertical con diferentes imagenes?

Cita:
Iniciado por alexk Ver Mensaje
en primera con CSS2 aun no se puede escribir verticalmente así que tocara hacerlo con imágenes...
Inexacto, Alexk
Y más sencillo de lo que parece
Eso y el menú de colorines

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 01/10/2009, 11:03
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Gracias por la respuesta Kseso? :) es mas sencillo que el que tenia jejejeje
  #10 (permalink)  
Antiguo 01/10/2009, 11:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como hacer un menu vertical con diferentes imagenes?

nahhh, a mi también me lo chivaron

Y por cierto, como habrás visto, no usa imágenes.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 01/10/2009, 11:10
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Cita:
Iniciado por kseso? Ver Mensaje
nahhh, a mi también me lo chivaron

Y por cierto, como habrás visto, no usa imágenes.

Un saludo
Si, por eso es mas sencillo del que hice al final jejeje
  #12 (permalink)  
Antiguo 01/10/2009, 11:15
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como hacer un menu vertical con diferentes imagenes?

Cita:
Inexacto, Alexk
Y más sencillo de lo que parece
Eso y el menú de colorines
jajaja.... no dije nada
  #13 (permalink)  
Antiguo 01/10/2009, 11:19
 
Fecha de Ingreso: enero-2009
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Bueno, ya que habia empezado a ponerme a hacerlo, aquí lo dejo, por si alguien lo ve algún dia, espero que fuera esto lo que bucabas :

El html para el menú:
Código HTML:
<html>
        <head>
                        <link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
        </head>
        <body>
                <ul>
                        <li class="menu1"><a href="#">&nbsp;</a></li>
                        <li class="menu2"><a href="#">&nbsp;</a></li>
                        <li class="menu3"><a href="#">&nbsp;</a></li>
                        <li class="menu4"><a href="#">&nbsp;</a></li>
                        <li class="menu5"><a href="#">&nbsp;</a></li>
                        <li class="menu6"><a href="#">&nbsp;</a></li>
                </ul>
        </body>
</html> 
Y el CSS:
Código:
.menu1, .menu2, .menu3, .menu4, .menu5, .menu6 {
        background-image: url('menunb.png');
        background-repeat: no-repeat;
        width: 33px;
        list-style-type: none;
}

.menu1 {
        background-position: 0 0px;
        height: 100px;
        padding: 0px;
        margin: 0px;

}

.menu1 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:100px;
        padding-left: 33px;
}

.menu2 {
        background-position: 0 -100px;
        height: 85px;
}

.menu2 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:85px;
        padding-left: 33px;
}

.menu3 {
        background-position: 0 -185px;
        height: 98px;
}

.menu3 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:98px;
        padding-left: 33px;
}

.menu4 {
        background-position: 0 -283px;
        height: 98px;
}

.menu4 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:98px;
        padding-left: 33px;
}

.menu5 {
        background-position: 0 -381px;
        height: 106px;
}

.menu5 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:106px;
        padding-left: 33px;
}

.menu6 {
        background-position: 0 -487px;
        height: 87px;
}

.menu6 a {
        text-decoration: none;
        padding-top: 0px;
        padding-bottom:87px;
        padding-left: 33px;
}
Tardo 5 min en aprender a usar el editor avanzado y... ale, a dar miles de respuestas xD

Última edición por Jrt_1990; 01/10/2009 a las 11:21 Razón: Me faltaba un &nbsp;
  #14 (permalink)  
Antiguo 01/10/2009, 11:22
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: como hacer un menu vertical con diferentes imagenes?

Gracias Jrt_1990 era asi mas o menos como lo tenia. :)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:19.