¡Hola! Quiero agradecerte muchísimo tu extraodinaria explicación sobre la construcción del efecto de acordeon con html y css. Un fuerte abrazo desde Panamá...
Esto se puede aprovechar para que hagas un menu responsive siempre y cuando sepas como utlizar o tengas conocimientos basicos en media query y mas que todo css - css3
Hola. Muy lindo el efecto, lo hice al 100% de la pantalla pensando que podría activarlo desde las de titulo (o sea que se active pasando el puntero por la palabra) pero no pude, me podrías ayudar en eso? o hay otra manera de hacer clic y que se active (y no pasar el puntero del mouse). Muy bueno los videos!!!
hola se ve super ultil la paleta de colores donde seleccionas para poner los background, es un programa q trae mac (o solo para mac) o esta tambien para win? y si esta para win como se llama? saludos
Hola me puedes decir si esto es aplicable a mi blog, exclusivamente en una página, quisiera incluir contenido de esa forma pero no se cómo implementarlo
Hola keyquotes, gracias por tu tutorial, estoy poniendo un border-radius pero solo se me aplica a los títulos pero no a los subapartados, además lo que quiero es que toda la caja sea redondeada en los bordes y también en los subpartados, sabes por qué no puedo hacerlo? Gracias.
Hola, como andás?... primero, muy buenos los tutos, muy explicativos. Ahora, tengo una duda... Hay posibilidad que quede abierto el "acordeon", o sea, que cuando pase por el "titulo 1" se abra, pero que si no paso por otro no se cierre. Desde ya muchas gracias. Saludos.
para hacer este efecto necesitas usar jquery, ya que css tiene el evento "mouseout" predefinido cuando quitas el mouse del div, aunque no es muy complicado desarrollarlo un saludo
Hola me puedes decir si esto es aplicable a mi blog, exclusivamente en una página, quisiera incluir contenido de esa forma pero no se cómo implementarlo
Que plugin usas para que te salga el color picker a la hora de escoger los colores en el CSS? Creo que no me coge bien el transition (-webkit-transition: height 0.2s;) no noto que haga una transición mas lenta
si utilizas chrome debe de funcionar, pero recuerda que esta es una propiedad de css3, por lo que tambien tienes que agregar: -moz-transition: (para mozilla), -o-transition: (para opera), -ms-transition: (para IE 10)
Muy buen tutorial. Fácil de seguir. Solo te haría una pequeña recomendación si me lo permites... Yo no metería música en el video porque es un coñazo. Sin acritud.
1000revolutions solamente con html y css no lograrás hacer eso. Es como si fuese paginación, y ahí te metes a bases de datos. No estoy seguro, pero con jQuery podrías lograrlo
Hola Keyquotes este excelente el trabajo y fácil de entender, solo tengo un inconveniente con el hover que no me crea el efecto, estoy usando Dreamwe..6 y coloque en el style lo siguiente: #Subapartado :hover #info { height: 180px; } No se si es por un tema de lenguaje por que e intentado con el (.) y igual no crea el efecto =(
Hola, bueno, tu video me sirvio de mucho, pero como hago para que el acordion me quede mas abajo de mi barra de menu? le he centrado pero el acordion me queda muy arriba y necesito bajarlo para que salga todo!
+Fabian Leonardo Rojas Rodriguez en lugar de poner un margin: auto al contenedor general, puedes ponerle un float:left o float:right aunque depende del contenido que queiras agregar a parte del acordeon un saludo
Hola Keyquotes interesante el tutorial pero como seria si uno quisiera que cuando den clic se quede desplegada y cuando le de clic a la otra, se cierre y de despliege
Hola!! hice todo y me salio bien, pero lo hice horizontal en vez de vertical, el tema es q el texto q tengo adentro ni bien empieza a desplegarse el acordeon, empieza a aparecer pero se va estirando. no se mueve fijo junto con la transición del div.
¡Hola! Quiero agradecerte muchísimo tu extraodinaria explicación sobre la construcción del efecto de acordeon con html y css. Un fuerte abrazo desde Panamá...
Le agradezco bastante su ayuda, bendiciones a su familia y a usted...
Hola, nuevamente muchas gracias por tus explicaciones, me están ayudando mucho tus videotutoriales. Gracias.
Esto se puede aprovechar para que hagas un menu responsive siempre y cuando sepas como utlizar o tengas conocimientos basicos en media query y mas que todo css - css3
wooou increible de verdad muy agradecido con el material de trabajo
gracias compañero me funciona a la perfeccion que DIOS te bendiga por esto que aportas.
Muchas gracias por tu tiempo. Exacto lo que buscaba
sos un genio!! gracias por todos los tutoriales!!
una buena opcion para esperar a que details y summary dejen de estar en working draft :) gracias
perdona la publicacion que puse anteriormente era realzionado con otro video que esta relacionado con fuentes para navegadores.
Hola...
Justo lo que buscaba.
Muchas gracias
vídeo muito bem explicativo, até eu que não sei falar em espanhol entendi.
Yo entendí también su portugués
muy buen tutorial, espero que sigas haciendo mas y mas seguido. Saludos
Hola. Muy lindo el efecto, lo hice al 100% de la pantalla pensando que podría activarlo desde las de titulo (o sea que se active pasando el puntero por la palabra) pero no pude, me podrías ayudar en eso? o hay otra manera de hacer clic y que se active (y no pasar el puntero del mouse). Muy bueno los videos!!!
hola se ve super ultil la paleta de colores donde seleccionas para poner los background, es un programa q trae mac (o solo para mac) o esta tambien para win? y si esta para win como se llama?
saludos
Muchas gracias por la respuesta inmediata.
otra preg... que editor usás?, me gusta mucho la interfaz del mismo.
Saludos, yo en div.titulo le agregué: cursor: pointer; Para que aparezca la manito al ubicarse sobre cada botón.
Hola me puedes decir si esto es aplicable a mi blog, exclusivamente en una página, quisiera incluir contenido de esa forma pero no se cómo implementarlo
hola srta ... y si te funciono??
Excelente tutorial felicitaciones
Buen vídeo me ayudo mucho gracias
Hola keyquotes, gracias por tu tutorial, estoy poniendo un border-radius pero solo se me aplica a los títulos pero no a los subapartados, además lo que quiero es que toda la caja sea redondeada en los bordes y también en los subpartados, sabes por qué no puedo hacerlo? Gracias.
Muy Buen Video , Muchas Gracias !
Excelente material!!
yo quiero poner poner un scroll bar en forma vertical ?? se puede o no.
me puedes decir cual es la cancion de fondo que esas ? exelente video
Hola, como andás?... primero, muy buenos los tutos, muy explicativos.
Ahora, tengo una duda... Hay posibilidad que quede abierto el "acordeon", o sea, que cuando pase por el "titulo 1" se abra, pero que si no paso por otro no se cierre.
Desde ya muchas gracias. Saludos.
para hacer este efecto necesitas usar jquery, ya que css tiene el evento "mouseout" predefinido cuando quitas el mouse del div, aunque no es muy complicado desarrollarlo
un saludo
Hola me puedes decir si esto es aplicable a mi blog, exclusivamente en una página, quisiera incluir contenido de esa forma pero no se cómo implementarlo
Que plugin usas para que te salga el color picker a la hora de escoger los colores en el CSS?
Creo que no me coge bien el transition (-webkit-transition: height 0.2s;) no noto que haga una transición mas lenta
si utilizas chrome debe de funcionar, pero recuerda que esta es una propiedad de css3, por lo que tambien tienes que agregar: -moz-transition: (para mozilla),
-o-transition: (para opera), -ms-transition: (para IE 10)
Thank you so much. I like your layout. Please, how can I get the css codes?
Muy buen tutorial. Fácil de seguir. Solo te haría una pequeña recomendación si me lo permites... Yo no metería música en el video porque es un coñazo. Sin acritud.
+Nihil Eso Mismo iba yo a desir
gracias!, como haria para agregar un submenu al desplegarse los titulos?
Excelente!
Hola, es posible hacerlo responsive?
SALUDOS AMIGO, DIME SE PUEDE HACER ESTO PERO CON PURO DISEÑO, SIN NECESIDAD DE ESCRIBIR CÓDIGO?.- GRACIAS.
buen vídeo amigo.. sigue así :)
El acordeon está genial gracias por el tutorial, lástima que no se adapte a info con diferente tamaño sino todos iguales.
NOESVALIDO2 solo tienes que modificar el hover de la altura del subapartado en automatico y resuelto.
div.subapartado:hover div.info{
height:auto;
}
1000revolutions solamente con html y css no lograrás hacer eso. Es como si fuese paginación, y ahí te metes a bases de datos. No estoy seguro, pero con jQuery podrías lograrlo
+NOESVALIDO2 pon en %
hola se puede hacer resposible el acordion
jejeje gracias muy bueno
Hola Keyquotes este excelente el trabajo y fácil de entender, solo tengo un inconveniente con el hover que no me crea el efecto, estoy usando Dreamwe..6 y coloque en el style lo siguiente:
#Subapartado :hover #info {
height: 180px;
}
No se si es por un tema de lenguaje por que e intentado con el (.) y igual no crea el efecto =(
es porque en vez de #(numeral) tenias que usar .(punto) Era una clase, no un id
a mi me pasa igual con dreamweaver cs6
Hola, bueno, tu video me sirvio de mucho, pero como hago para que el acordion me quede mas abajo de mi barra de menu? le he centrado pero el acordion me queda muy arriba y necesito bajarlo para que salga todo!
Y si en lugar de que se abra cuando pongan el cursor quiero que sea cuando le den click que debo cambiar???
Hola buenas
como hago para darle posisionamiento acomodarlo a algun lado de la patalla gracias
+Fabian Leonardo Rojas Rodriguez en lugar de poner un margin: auto al contenedor general, puedes ponerle un float:left o float:right aunque depende del contenido que queiras agregar a parte del acordeon
un saludo
como se haria para q no sea acordeon?? quiero q en vez de q se habra poniendo el mouse encima, se habra haciendole click aiuda plss!!
Hola Keyquotes interesante el tutorial pero como seria si uno quisiera que cuando den clic se quede desplegada y cuando le de clic a la otra, se cierre y de despliege
para los efectos con click hace falta javascrit o jquery, con css solamente no es posible hacerlo
un saludo
a gracias por responder la duda..
Existe una forma de hacer que se despliegue al hacer click sin necesidad de javascript, pero debes usar radiobutton o checkbox. :)
como se le puede anexar un buscador ?=?
Si le colocan un margin:6px; al div#body quedara mucho mas atractivo el menu
en vez de vertical como lo puedo hacer horizontal
Hola!! hice todo y me salio bien, pero lo hice horizontal en vez de vertical, el tema es q el texto q tengo adentro ni bien empieza a desplegarse el acordeon, empieza a aparecer pero se va estirando. no se mueve fijo junto con la transición del div.
prueba poniendole al texto un ancho fijo desde css, por ejemplo width:500px;
o tambien puedes probar a ponerle un padding al texto
un saludo
En donde escribes todo el codigo, que programa es ?
sublime text 2, puedes encontrar en mi canal una lista donde explico como descargarlo y añadirle plugins
un saludo
+guillermo reyes pero el codigo no se escribe solo . tienes que saber lenguaje de desarrollo html5 y css3
Excelente. Gracias; ya acabo de hacer mi acordeón: shinobi.my-place.us/tests/Acordeon.html
muchas gracias por haberme mostrado tu trabajo, me alegra que la gente aprenda con mis videos y ver como progresáis gracias a ellos.
un saludo