Тёмный

Menú Desplegable - HTML & CSS 

Código Web
Подписаться 8 тыс.
Просмотров 97 тыс.
50% 1

Creación de un menú desplegable con HTML & CSS
github.com/codigowebmp/menu-d....
Puedes reconocer y apoyar mi trabajo: / codigoweb

Опубликовано:

 

1 авг 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 150   
@alfredoCode
@alfredoCode 2 года назад
Muy entendible y en tan poco tiempo, desde como vas construyendo la maquetación de forma practica y fácil de entender hasta como vas mostrando los resultados de cada función del css paso a paso para ver como funcionan 😃
2 года назад
Gracias por el comentario.
@miguelangelrenteriasanchez7856
@miguelangelrenteriasanchez7856 2 месяца назад
Llevaba 2 horas preguntandome porque no funcionaba y era por una letra en el nombre del css. :) PURO CARNEIRO!!!!
Месяц назад
Hola Miguel!!! Suele pasar jaja!! Saludos!!
@vmGrymm
@vmGrymm 2 года назад
Muy buenaa! Este tipo de videos cortos y rapidos hacian falta
2 года назад
Saludos!!
@argentumbueno3603
@argentumbueno3603 2 года назад
Excelente! Sencillo y preciso
@doberxmc1782
@doberxmc1782 2 года назад
Dios te daría un abrazo ahora mismo, me sacaste de un lio, gracias por la ayuda de verdad
2 года назад
Que bueno que te sirvió!! Saludos
@marcogb3414
@marcogb3414 2 года назад
De lo mejor, sencillo y práctico...
2 года назад
Gracias, saludos
@micaelaramirez2265
@micaelaramirez2265 Год назад
simplemente muchas gracias, eres un crack! tus videos me han ayudado a practicar bastanteee!
Год назад
Hola Micaela, gracias por comentar!! Qué bueno que los videos te han servido. Te encargo compartir el canal!! Saludos!!
@CoronelMilton
@CoronelMilton Год назад
Una ayuda para los que quiera hacer el fondo a parte y que no sea todo el body, van a encontrar que el padre osea el contenedor baja junto a la barra de navegacion, le agregan un overflow como lo siguiente y se arregla (Al padre se lo agregan) .img-container { width: 100%; height: 100vh; background-image: url(img/img.jpg); background-size: cover; overflow: auto; }
@francelixnavas7648
@francelixnavas7648 2 года назад
De los videos que observe no me funciono nada y me encontré con este video y excelente me funciono muchas gracias
2 года назад
Buenisimo!!! Saludos!!
@Ryussaki
@Ryussaki 2 года назад
gracias no sabia hacer un menu desplegable muy buen video
2 года назад
De nada!
@officialalexgic
@officialalexgic 2 года назад
Brother, me encanto el video, preciso y corto. Pero me hubiera gustado que narraraz el por que de cada codigo. Mas que nada, yo me estoy iniciando en la programacion y no se muy bien el por que de cada codigo. Pero igual, excelente el video.
2 года назад
Gracias Alex por el comentario. Esta en planes cuando se den las condiciones explicar!! Saludos
@rutidri675
@rutidri675 Год назад
Gracias!!!!! Muy sencillo y útil:)
Год назад
Hola, qué bueno que te sirvió el video! Saudos!!
@estefanipaternina3848
@estefanipaternina3848 2 года назад
MUCHAS GRACIAS ME EAYUDASTE CON UN PROYECTO
2 года назад
Genial!! Que bueno que te sirvió. Saludos!!
@daniel_of523
@daniel_of523 Год назад
muchas gracias bro por este video me ayudo mucho
Год назад
Hola Daniel, que bueno que te sirvió! Gracias por comentar. Saludos!!
@eliasecheverria8450
@eliasecheverria8450 Год назад
Buen video, sencillo, rápido y funcional, bastante infravalorado la verdad que tenga más de 30 k de vistas y menos de 1 k de likes
Год назад
Hola Elías, muchas gracias por el comentario y apoyo!! Te encargo compartir el canal. Saludos!!
@tradingdesdezero3904
@tradingdesdezero3904 Год назад
Muy bueno me sirvio mucho
Год назад
Buenisimo!! Saludos.
@manuelgarcialeo9087
@manuelgarcialeo9087 Год назад
Gracias amigaso un 10/10
Год назад
Hola Manuel, muchas gracias por comentar!! Saludos.
@wheeinlvsme4216
@wheeinlvsme4216 2 года назад
Gracias
@asgart66
@asgart66 Год назад
Muy bueno👍
Год назад
Muchas gracias Sérgio por comentar. Saludos!!
@JeanSantos-by3oi
@JeanSantos-by3oi 2 года назад
Gracias crack
2 года назад
De nada! Saludos!!
@tomassigel
@tomassigel Год назад
sos un genio
Год назад
Hola Tomás!! Gracias por comentar, pero no es para tanto jaja!! Saludos!!
@user-cy9wb2nu9k
@user-cy9wb2nu9k 2 месяца назад
la pregunta del millon es: en mi version web mi barra tiene 4 items INICIO , NOSOTROS, SERVICIOS, CONTACTO , son anchors y cuando clickeo en cada uno me lleva a una parte distinta de la pagina, pero mi hover dentro del apartado SERVICIOS me despliega opciones , el tema es que cuando estoy desde la version movil para desplegar esa lista tengo que presionar la palabra SERVICIOS lo cual me lleva a otro lado , me explico? como hacer para que se despliegue pero no me lleve a otra parte de la pagina o.o
@Andres_cali
@Andres_cali 2 года назад
Papi coloquese un 10 y vaya tómese un gaseosa a nombre mío.
Год назад
Jaja Gracias Andres por comentar! Saludos.
@noticiasdewallstreet9638
@noticiasdewallstreet9638 Год назад
Corto el video pero muy eficaz!!
Год назад
Gracias por el comentario! Saludos!
@davidpetrosyan1735
@davidpetrosyan1735 Год назад
I just love u dude
@Bland-RL
@Bland-RL 2 месяца назад
Hola, una pregunta; ¿en tu CSS, de dónde sacaste el link del @import url que está entre los paréntesis?
Месяц назад
Hola!! De la página de google fonts!!
@cristiandanielaguilarrojas8506
@cristiandanielaguilarrojas8506 10 месяцев назад
Bro una sujerencia aplicale al .menu-horizontal li:focus-within .menu-vertical { display: block; } para que la lista se mantenga y se muestre solo al darle click 👍👍 Gracias por tu contenido exelente
@johan_9990
@johan_9990 2 года назад
gracias bro un like
2 года назад
Saludos!!
@EnriqueIllescas-lb2wq
@EnriqueIllescas-lb2wq 2 года назад
gracias ;:)
2 года назад
Saludos!!
@ARMAPRO
@ARMAPRO Год назад
Hola que tal, que pasa si quiero que el background color ocupe todo el ancho de la pantalla?, como lo solucionarias tu, con esta forma me ha imposibilitado hacerlo, puedes enseñarlo porfavor. Gracias de antemano.
Год назад
Hola, para que el background del nav ocupe todo el ancho de la pantalla tendrías que poner el nav dentro de un header, dando el mismo color de fondo que el nav, y haces que ocupe el 100% de ancho. Lo otro queda igual.
@ARMAPRO
@ARMAPRO Год назад
@ gracias me fue muy util tu ayuda, me funciono perfecto
Год назад
@@ARMAPRO Buenisimo! Saludos.
@milkareyezpaniaguaz5695
@milkareyezpaniaguaz5695 2 года назад
Que hiciste para hacer el segundo paso? : donde ya el menu estaba hecho y aparecio en otro lugar
2 года назад
Hola Milka, decime en que minuto exacto del video así te explico bien!!
@i-warrock-i9270
@i-warrock-i9270 2 года назад
¿por que cuando cargo la url de una imgen en el css, no me aparece si la dirección esta puesta bien sin errores
2 года назад
Hola! Mandame, fijate si la imagen esta en la carpeta correspondiente y esta bien escrito el nombre de la imagen. Cualquier cosa mandame el código a martyn.1501.2013@gmail.com
@Nightmare13153
@Nightmare13153 11 месяцев назад
Execelente vídeo, me funcionó, solo que tengo un problema. Hice todo exactamente como lo muestra el vídeo paso paso pero al final no se por que en los menús desplegables al pasar el cursor por encima de ellos no se se ponen todos de color negro como en el vídeo osea si se pone el color de fondo negro al pasar el cursor sobre ellos pero hay una pequeña parte qué no se logra poner por completa en negro, alguna solución?
11 месяцев назад
Hola Ricardo, pudiste solucionar el problema?? si no mandame el proyecto a martyn.1501.2013@gmail.com para verlo.
@yamilmedina248
@yamilmedina248 10 месяцев назад
hola amigo, el problema es el padding del .menu-vertical , yo pude solucionarlo con un padding:0; , te recomiendo que siempre que tengas ese tipo de problemas inspecciona tus elementos y agrega un border para observar mejor el box model y darte cuenta mas fácil.
@thewest2499
@thewest2499 2 года назад
Hola, buenas noches Como haces para cuando tocas una opcion que se despliega, te lleve a algun campo?
@musicayefemerides
@musicayefemerides 2 года назад
Tenes que colocar el enlace dentro de la etiqueta , donde dice href=" " dentro de las comillas va el enlace
@thewest2499
@thewest2499 2 года назад
@@musicayefemerides Okey perfecto, muchas gracias!!
@pilarmolnar888
@pilarmolnar888 Год назад
Hola, buen video, te quería hacer una consulta, seguí el tutorial paso a paso, pero la lista-vertical me queda alineada hacia la derecha y poniendo en "menu-vertical li:hover { text align: left } (mas lo que pusiste en el tutorial), no me lo corrige, sabes por que puede llegar a suceder esto? Desde ya muchisimas gracias !
Год назад
Hola, mandame el código por drive a martyn.1501.2013@gmail.com así puedo ayudarte mejor...
@pilarmolnar888
@pilarmolnar888 Год назад
@ Ahora te lo mando, muchas gracias.
Год назад
@@pilarmolnar888 Ok, avisame cuando lo hayas mandado.
@pilarmolnar888
@pilarmolnar888 Год назад
@ Ahí lo envié.
Год назад
@@pilarmolnar888 No me ha llegado nada todavía...
@user-vy9uq8ns5p
@user-vy9uq8ns5p 10 месяцев назад
si me gusto
10 месяцев назад
Buenísimo!! Saludos!!
@est3bannn
@est3bannn Год назад
hola! como hago para cambiar el tamaño de la foto del fondo? me queda muy grande y con background-size no la puedo achicar
Год назад
Hola Esteban, para que quede bien la foto que uses tiene que ser rectangular, además agregarle background-position: Center Center;
@est3bannn
@est3bannn Год назад
@ a buenisimo! si le hagregè ese y height, empecè a aprender hace re poquito, estoy tratando de hacer uno por dìa, gracias por responder, me gusto mucho el video!!
Год назад
@@est3bannn buenísimo Esteban, cualquier cosa estamos para ayudar! Saludos
@pedrosferco9460
@pedrosferco9460 2 года назад
Hola. Como seria si quiero hacer que desaparezca el menu al hacer click en una de las opciones?
2 года назад
Hola Pedro. Para ocultar el menú principal una opción sería usar javascript. De todas formas, al hacer clic en cualquiera de los links, te llevaría a otra página donde el menú no lo pones si no lo necesitas. Si especificas mejor cual es la idea de ocultar te podría ayudar mas detalladamente. Saludos
@fernanda-jm1im
@fernanda-jm1im Год назад
Holaa, espero puedas ayudarme. Cómo podría hacerle para que al darle click a un tema y estar en esa página, ese recuadro mantenga el color? Por ejemplo, si estoy en la parte de Inicio que ese recuadro esté de color y si paso a cursos que ahora sea ese. Por favor:(
Год назад
Hola Fernanda, una forma de lograr eso es asignar una clase al al elemento que queres que este destacado. En cada página agregas la clase al li correspondiente. Y mediante css le das el estilo que queres. Cual cosa avisame. Saludos.
@fernanda-jm1im
@fernanda-jm1im Год назад
@ gracias! pero no me sale:( estoy confundida en dónde debo poner el código de la clase, en el archivo de estilos y después en el archivo que lleva la información del tema? O sólo va en el archivo del tema? Es que ya logré cambiar el color del bloque del tema, pero me lo aplica parejo en todas las páginas aunque lo ponga en la página del tema específico, o no sé si lo estoy poniendo mal:(
@fernanda-jm1im
@fernanda-jm1im Год назад
@ Disculpa la molestia, es que es un proyecto integrador que vale para dos materias y estoy desesperada jajaj
@danielsolis715
@danielsolis715 29 дней назад
Hola como puedo hacer que al tocar una opcion del menu despegable, esta me diriga a una parte de la pagina... Digamos al tocar Html me lleve a la seccion Html, quiero hacerlo con un producto
21 день назад
Hola Daniel, simplmente pone en el hrfef la a la página donde quieres ir. No se si esta era tu duda. Saludos.
@putasmamadas7498
@putasmamadas7498 Месяц назад
buen video bro
Месяц назад
Gracias por comentar! Saludos!!
@hpta
@hpta 13 дней назад
sos un pedazo de capo
@MundoGraficoPuertoWilches
@MundoGraficoPuertoWilches Год назад
y para que funcione un boton, fue me muchisima ayuda por favor responder
Год назад
Hola, gracias por comentar!! Tu duda es cómo hacer para que funcione cualquier de los enlaces del menú??
@andresespinosa6340
@andresespinosa6340 Год назад
Excelente pero no entiendo la primera parte @import url (.......) que se está llamando ahì
Год назад
Hola Andres, ahí estoy importando la fuente (la tipografía) de google fonts.
@Bacon-hf2xg
@Bacon-hf2xg Месяц назад
Disculpa como puedo hacer para que admita 4 categorías, solo admite 3 si no se desordena
21 день назад
Hola, debería funcionar con la cantidad de categorias que quieras, que raro que se desordene.
@Jorg-rockoff
@Jorg-rockoff 2 года назад
Gracias ! podes pasarlo a responsive?
2 года назад
Hola, agendado!!
@kevinsoto7856
@kevinsoto7856 2 года назад
que programa ocupas
2 года назад
Hola, Sublime Text! Saludos
@luisarguello7476
@luisarguello7476 Год назад
Por qué no pones los códigos en los comentarios o en la descripción del vídeo bro
Год назад
Hola Luis, en la descripción esta el link para descargar el código. Saludos
@leonardoquintero9704
@leonardoquintero9704 18 дней назад
Bro tengo una duda
@levibacchiddu8057
@levibacchiddu8057 Год назад
bro tengo un problema que las litas que se dropean para abajo, tienen una parte que no se pinta, quedan unos pixeles de las etiquetas sin pintar y queda feo
Год назад
Hola, mandame el código por aca, el html y el css. O por drive
@cristian92nqn
@cristian92nqn Год назад
@ Hola yo tengo el mismo problema, lo pudieron resolver?
Год назад
@@cristian92nqn Hola Cristian, si podes mandarme el código mejor, así te puedo ayudar. puede ser por drive o por github.
@cristian92nqn
@cristian92nqn Год назад
@ dale me pasas tu mail asi te lo mando?
Год назад
@@cristian92nqn martyn.1501.2013@gmail.com
@joelmedina7244
@joelmedina7244 Год назад
Hola bro, trate de adaptar mi código a la explicación y creo que está bien pero no me funciona, no me despliega la lista🙃
Год назад
Hola Joel mándame un drive a martyn.1501.2013@gmail.com para ver el código.
@joelmedina7244
@joelmedina7244 Год назад
@ ya encontré mi error bro pero muchas gracias por contestar
Год назад
@@joelmedina7244 buenísimo. Saludos.
@vvhoisp.v
@vvhoisp.v Год назад
Hola, me encantó el video, pero me surgió un problema, la primera ventana con submenu me aparece, pero la segunda no, a que se debe?
Год назад
Hola, ,mandame por acá el codigo html y css
@vvhoisp.v
@vvhoisp.v Год назад
CSS @import url('fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap'); *{ box-sizing: border-box; margin: 0%; padding: 0%; font-family: 'Nunito', sans-serif; font-size: 25px; text-decoration: none; } header{ width: 100%; position: fixed; top: 0; left: 0; background-image: url(../assets/img/background.jpg); } /*B A R R A - D E - N A V E G A C I O N*/ nav{ max-width: 900px; margin: auto; background-image: url(../assets/img/backgroundinterior.jpg); font-size:20px; margin-top:50px; } .menu_horizontal{ list-style: none; display: flex; justify-content: space-around; } .menu_horizontal > li > a{ display: block; padding: 15px 20px; color: black; text-decoration: none; } .menu_horizontal > li:hover{ background-image: url(../assets/img/backgroundhover.jpg); } .menu_vertical{ position: absolute; display: none; list-style: none; width: 200px; background-color: rgba(0, 0, 0, .5); } .menu_horizontal li:hover .menu_vertical{ display:block; } .menu_vertical li:hover{ background-image: url(../assets/img/backgroundhover.jpg); } .menu_vertical li a{ display: block; color: black; padding: 15px 15px 15px 20px; text-decoration: none; }
@vvhoisp.v
@vvhoisp.v Год назад
@ Me refiero que cuando quiero ir al navegador, para el segundo "ul" no me aparece los desplegables
Год назад
@@vvhoisp.v pasame el html tambien
@vvhoisp.v
@vvhoisp.v Год назад
@ ahi están ambas, html y css, en comentarios separados
@victorsapalomera
@victorsapalomera Год назад
Muy buen vídeo, he conseguido mi objetivo, pero ¿que habría que poner y donde para hacer que el menú vertical se despliegue con una transicion?
Год назад
Hola Victor, en el caso que quieras usar algun efecto al aparecer, en vez de ocultarlo con display:block, tenes que darle opacidad 0, y al mostrarlo cambiar su opacidad a 1. Ademas debes poner transition: 1s en la clase que donde pusiste opacity:0. Espero te sirva. Saludos.
@Adabelgnr
@Adabelgnr Год назад
Buen día, si por Ej tengo una caterogia producto y de ahí se despliega un sub menú, por Ej remera. Como puedo hacer para que al clickear me lleve a la lista de remeras? No se si me explico 😂
@Canaldepruenba8-bs6of
@Canaldepruenba8-bs6of 11 месяцев назад
pone en la parte de las comillas "remes.html" osea creas otra pagina html y listo xd
@Canaldepruenba8-bs6of
@Canaldepruenba8-bs6of 11 месяцев назад
Remeras
@user-vn7uv2sh2c
@user-vn7uv2sh2c 6 месяцев назад
como lo hago para submenus por favor y muy bueno tu video bro
6 месяцев назад
Hola, pudiste agregar los submenus?
@asyncFlex
@asyncFlex 2 года назад
hubiera sido util un github en la descripcion
2 года назад
Ya esta en la descripción el link a github. Saludos!!
@erikdcr2567
@erikdcr2567 2 года назад
Nesecito ayuda
@user-ih7lz2vk5b
@user-ih7lz2vk5b Год назад
no me carga la imagen
Год назад
Hola Benjamín pudiste solucionar el problema??
@user-ih7lz2vk5b
@user-ih7lz2vk5b Год назад
@ si muchas gracias
@paradoxxx3478
@paradoxxx3478 8 месяцев назад
No se me despliega el menu u.u
7 месяцев назад
Hola, pudiste solucionar tu problema??
@erikdcr2567
@erikdcr2567 2 года назад
Háblame si me puedes ayudar
@erikdcr2567
@erikdcr2567 2 года назад
Oye
2 года назад
En que te puedo ayudar?
@erikdcr2567
@erikdcr2567 2 года назад
@ el último código del minuto 4:36 no me funciona ¿puedes pasarme tu correo para mandarte una foto para que veas?
2 года назад
martyn.1501.2013@gmail.com