como hacer un menu vertical con diferentes imagenes?

pakillo · #1 (**permalink**) 30/09/2009, 22:10

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

alexk · #2 (**permalink**) 30/09/2009, 22:18

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!...

pakillo · #3 (**permalink**) 30/09/2009, 22:23

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.

Calizman · #4 (**permalink**) 01/10/2009, 01:15

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!!

Jrt_1990 · #5 (**permalink**) 01/10/2009, 02:56

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

alexk · #6 (**permalink**) 01/10/2009, 08:59

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

pakillo · #7 (**permalink**) 01/10/2009, 09:03

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 :)

kseso? · #8 (**permalink**) 01/10/2009, 10:01

Cita:

Iniciado por alexk

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

pakillo · #9 (**permalink**) 01/10/2009, 10:03

Gracias por la respuesta Kseso? :) es mas sencillo que el que tenia jejejeje

kseso? · #10 (**permalink**) 01/10/2009, 10:08

nahhh, a mi también me lo chivaron

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

Un saludo

pakillo · #11 (**permalink**) 01/10/2009, 10:10

Cita:

Iniciado por kseso?

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

alexk · #12 (**permalink**) 01/10/2009, 10:15

Cita:

Inexacto, Alexk
Y más sencillo de lo que parece
Eso y el menú de colorines

jajaja.... no dije nada

Jrt_1990 · #13 (**permalink**) 01/10/2009, 10:19

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

pakillo · #14 (**permalink**) 01/10/2009, 10:22

Gracias Jrt_1990 era asi mas o menos como lo tenia. :)