Тёмный

✅COMO HACER MENÚ DESPLEGABLE CON PURO HTML Y CSS 

VisualAvalon
Подписаться 51 тыс.
Просмотров 115 тыс.
50% 1

En esta ocasión te estaré enseñando como puedes crear un hermoso menú con submenu desplegable con puro HTML y CSS, para que de tal manera lo puedas implementar en lo que es tu pagina web. Todo esto será creado de una manera muy fácil y bien explicada.
😉No olvides → SUSCRIBIRTE Y ACTIVAR LA CAMPANA🔔
💼Recursos del tutorial - DESCARGAR PROYECTO
♦ Proyecto terminado: DISPONIBLE DESPUÉS QUE EL VIDEO SEA PÚBLICADO
🎥¿CON QUÉ SE GRABÓ ESTE VIDEO?
📷CÁMARA:
Panasonic Lumix GH4R
👓LENTE(OBJETIVO):
Panasonic Lumix 25mm F1.7
🔭TRIPODE:
NEEWER 70 inch
🎤MICROFONOS:
Condensador: NEEWER NW-700
Solapa: Rode SmartLav+
🎛INTERFAZ DE AUDIO:
BEHRINGER U-PHORIA UM2
♦Acerca de MagtimusPro
Pagina Web: goo.gl/EENS5R
Facebook: goo.gl/b43uMg
Instagram: goo.gl/KTMrHS
Twitter: goo.gl/eSdguk
GitHub: goo.gl/WvYTsq
RU-vid: goo.gl/fMD3XB
Pinterest: goo.gl/dpHekf
⌚TIMESTAMPS:
0:00 INTRODUCCIÓN
2:01 ENTENDIENDO EL PROYECTO
3:29 CREANDO LA ESTRUCTURA HTML
9:23 CREANDO LOS ESTILOS CSS
12:00 DISEÑANDO HEADER SUPERIOR
14:29 BARRA DE MENÚ
23:19 INSERTANDO ICONO HOME EN MENÚ
30:00 DISEÑANDO SUBMENÚ
42:00 HACIENDO MENÚ RESPONSIVE
48:58 EVENTO CLICK CON PURO CSS
58:19 INSERTANDO ARTICULOS EN EL PROYECTO
1:02:39 PALABRAS FINALES
▪◾◼HASHTAG◼◾▪
#MENU
#DESPLEGABLE
#RESPONSIVE

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

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 170   
@scv1300
@scv1300 2 года назад
Fui programador hace 20 años y había dejado de programar,ahora por necesidad lo estoy retomando y es con HTML y CCS, Muchas gracias por tu ayuda. Te felicito, todo un profesional.
@cientifica9150
@cientifica9150 Год назад
Hola, ¿qué tal? Yo tengo 19 años y estoy aprendiendo esto por mi cuenta... no tengo formación académica en este tema, terminé secundaria y no quiero ir a la universidad de mi país y tengo un conocimiento decente hasta ahora... podría hacerte algunas preguntas acerca del tema laboral? Me interesa...
@luisalbertopachecohernande2037
​@@cientifica9150 ayuda bro
@caam1
@caam1 Год назад
amigo solo quiero agradecerte por la dedicación y tiempo que haces para enseñarnos, de corazón muchas gracias
@Ken-qp4ef
@Ken-qp4ef Год назад
Este tipo sabe explicar, es porque tiene buena dicción y explica las cosas al momento de que las hace de manera fluida.
@carmen7606
@carmen7606 2 года назад
Me gusta mucho como expicas porque vas paso a paso y se entiende muy bien.Gracias
@josemanuelherrero6495
@josemanuelherrero6495 2 года назад
Excelente toda tu explicación paso a paso amigo Magtimus!!!!!!!!!!!
@oscargallardo6464
@oscargallardo6464 18 дней назад
GRACIAS GRACIAS GRACIAS!!!!! Me ha sido de gran utilidad este tutorial!!! Te felicito por la manera tan simple y práctica de enseñar!!! Saludos desde Argentina.
@claucad52
@claucad52 Год назад
Muy bueno! apenas estoy empezando pero lo fui haciendo paso a paso viendo el video, quedó genial! un abrazo!
@gustavoestrada4152
@gustavoestrada4152 Год назад
Excelente el tuto todo bien explicado con detalles. Muchas Gracias.
@blackman4419
@blackman4419 Год назад
Este tipo si sabe dar un tutorial, soy principiante en esto y en otras ocasiones no te específican que necesitas carpetas de imajenes o los enlaces que usas y como se usa, en fin te felicito encerio, sub nuevo
@carlosmariovischi2823
@carlosmariovischi2823 Год назад
te quiero preguntar si puedo usar parte de este codigo paraa un proyecto personal???, muchas gracias y estoy aprendiendo.
@luisfernandolondonosanchez4851
@luisfernandolondonosanchez4851 9 месяцев назад
ESTOY APRNDIENDO HTML Y CSS, EXCELENTE EL EJERCICIO Y LA EXPLICACION...MUCHAS GRACIAS
@leonardomontillamartinez9470
@leonardomontillamartinez9470 2 года назад
Mi hermano que MAESTRO, todo un CRACK de la programación, EXCELENTISIMO VIDEO men!!!!
@yelkamireya
@yelkamireya Год назад
Excelente explicación. Muchas gracias por todo.
@yimcomos9857
@yimcomos9857 Год назад
muy completo los videos y bien explicado para saber que función cumple cada etiqueta
@saymone6721
@saymone6721 Год назад
Chido Carnal buena onda te agradezco mucho. Bendiciones gracias a ti e incrementado un poco mas mi habilidad en el responsive.
@fredishernandez8205
@fredishernandez8205 2 года назад
Gracias estoy iniciando y tus vídeos son los mejor para aprender
@CesarSaavedraH
@CesarSaavedraH 9 месяцев назад
Mi hermano, usted es un duro... Gracias por el video... Saludos desde Panamá 🇵🇦
@santiagofonzo9336
@santiagofonzo9336 2 года назад
Buenísimo viejo, clasísmo el proceso! Gracias!!
@akiomae
@akiomae 2 года назад
Este video va a ser genial, esperando el estreno
@propositivo2025
@propositivo2025 2 года назад
Excelente tutorial, me lo seguí todo, solo en la parte mobile me resultó más fácil ponerle un poco de javascript a la activación del menú, seguiré viendo tu contenido.
@eduardomarcelinoballestero9000
Excelente mi hermano, muy buena didáctica para la explicaciones.
@ARMAPRO
@ARMAPRO Год назад
Excelente trabajo bro, gracias por este gran taller.
@carleto9294
@carleto9294 2 года назад
Gracias hermano, me sirvió de mucho, aprendí muchas cosas con este video, sigue así :)
@jovanyjimenez8920
@jovanyjimenez8920 Год назад
muchas gracias por compartir tus conocimientos
@braveheart9301
@braveheart9301 2 года назад
Si has bajado a ver los comentarios te aviso, éste tutorial no es para principiantes, para seguirlo hace falta tener cierto nivel en html y css, gracias para el profe, eres un crack, menos políticos y mas gente como usted, el mundo iría mucho mejor.
@franciscosantiagocruz9867
@franciscosantiagocruz9867 Год назад
Genial, muchas gracias explicas excelente.
@cristiana3364
@cristiana3364 11 месяцев назад
Muy buen video. Estaria bueno que hagas una pagina parecida pero sin usar los operadores >. Ya que todos los videos actuales nadie los usa. Vos explicas re bien, por eso me gustaria.
@ladelec
@ladelec Месяц назад
Excelente ejemplo! nuevo suscriptor.
@cientifica9150
@cientifica9150 Год назад
Tus tutoriales son los mejores mi amigo
@alexfernandezcasatejada6809
tu si que sabes hacer tutoriales, eres un grande
@phoenixrx
@phoenixrx 2 года назад
Excelente tutorial, muy bien explicado todo excepto que no funcionan los submenus adecuadamente cuando estan en modo responsive pequeño
@keniamengon4628
@keniamengon4628 Год назад
En caso de querer todas las opciones con imagenes, no solo el "Home" como seria, podrias hacer tutorial para ese caso por favor! y gracias por los tutoriales siempre tan buenos y bien explicados.
@nazaz308
@nazaz308 Год назад
sos un crack! Te felicito por el tremendo contenido! segui asi!
@roquecastroaraya1431
@roquecastroaraya1431 2 года назад
demasiado bueno, explicas muy bien, es mas no entiendo como siendo tan bueno tienes tan pocos suscriptores
@Spirituhim
@Spirituhim 2 года назад
muchas gracias, me ahorraste demasiado tiempo
@adrianacanupaan2359
@adrianacanupaan2359 2 года назад
Exelente muchas gracias!!
@inversoresmc755
@inversoresmc755 Год назад
Gracias profe. Y saludo desde República Dominicana
@pabloezequielsaenzbriones3655
@pabloezequielsaenzbriones3655 9 месяцев назад
amigo, SOS UN GENIO. SIn nada mas que decir me suscribo y doy like
@sebasx...
@sebasx... Год назад
Eres un genio, solo que me gustaría ver un tutorial de lo mismo pero en php saludos ✌
@newentu
@newentu 11 месяцев назад
Excelente tutorial, me sirvio mucho, saludos!
@nayelireyes187
@nayelireyes187 Год назад
Me encantó , eres un crack . Nueva suscriptora
@omarrobertopinedahernandez9327
@omarrobertopinedahernandez9327 2 года назад
muchas gracias por el contenido sigue asi!!
@christianbazalar8595
@christianbazalar8595 2 года назад
Crack, mis respetos.
@anfelobo
@anfelobo 2 года назад
Cristian!! Que PRO! Gracias!!!!
@Charlie-le4sp
@Charlie-le4sp 2 года назад
gracias magtimus una vez mas me has ayudado muchisimo , gracias
@VisualAvalon
@VisualAvalon 2 года назад
Con gusto... Saludos hermano!
@carlosg.9583
@carlosg.9583 2 года назад
Buen vídeos, sigue adelante.
@pedrosferco9460
@pedrosferco9460 2 года назад
Muy bueno. Gracias
@grisneidycruz8800
@grisneidycruz8800 2 года назад
miop usted suena dominicano , y tu ere un duro el video tuyo no lo pusieron en una clase
@bryanleon9534
@bryanleon9534 2 года назад
Gracias por este tutorial, esta entretenido y muy bueno :)
@VisualAvalon
@VisualAvalon 2 года назад
Gracias a ti hermano por tu apoyo! Saludos
@k.jayalaayala2837
@k.jayalaayala2837 Год назад
muchas gracias amigo me sirvio demasiado!
@theijarurbano6852
@theijarurbano6852 Год назад
Excelente tutorial mejor imposible mi pregunta es apenas estoy aprendiendo ya que me gusta la programación y quiero aprender como hago y tengo más de un submenu
@juanjimenezfernandez8504
@juanjimenezfernandez8504 2 года назад
Muy buen video, sigue así!!!
@Henry_Nunez
@Henry_Nunez Год назад
Esta genial este menú. Pregunto: que debo hacer para que me funcione sin conexión a internet ya que veo la fuente (google fonts) requiere de una conexión. Muchas gracias, saludos. 👍
@osvaldotorrez8975
@osvaldotorrez8975 2 года назад
Muy buen tutorial. Aprendi varias tecnicas.
@VisualAvalon
@VisualAvalon 2 года назад
Me alegro muchísimo hermano! Espero siempre servirte de ayuda! Saludos
@johanmena1692
@johanmena1692 2 года назад
Hey tu eres un tigiere manin me gusto mucho gracias
@joorchampi3346
@joorchampi3346 2 года назад
Tu si que sabes. A ver si soy capaz... jeje... que los menus de mis webs ya aburren. Gracias y un saludo.
@ewretrewtretretr9913
@ewretrewtretretr9913 Год назад
gracias amiguito, me ayudo mucho
@MaestreDLosBuenos
@MaestreDLosBuenos Год назад
Hermano muchas gracias por lo conciso de tu tutorial. Podrias facilitar el proyecto para descargarlo?
@wilimberrico43
@wilimberrico43 Год назад
Yo también lo ando buscando xd
@alejandrocarreno1121
@alejandrocarreno1121 7 месяцев назад
muy buen tutorial nuevo sub
@skybood1304
@skybood1304 2 года назад
Me encanto el video aprendin muchas cosas y practique otras que ya estaba olvidando como hacer, lo mas seguro lo vea un par de veses mas hasta que lo maneje todo si necesitar verlo. Solo una cosa entiendo tu pasion por que todo sea con CSS pero si es necesario usar un par de lineas de JS para el menu lo deberias aplicar yo asi lo suelo hacer y es mas limpio el codigo de CSS en lugar de hacer tantas maromos con el check box, otra cosa no estoy muy deacuerdo en usar tantas etiquitas para llegar a un hijo es mejor usar id o clases al final esa es la idea. Pero igual como mensione antes yo estoy aprendiendo y tu video es una joya en yutube sigue compartiendo tu tiempo y conocimiento y yo aunque sea te doy mi like y te aseguro ver el video de principio a fin.
@jorgedavidtucseabad3779
@jorgedavidtucseabad3779 8 месяцев назад
me lo puedes pasar
@orellanafloresjesleralexan8179
@orellanafloresjesleralexan8179 2 года назад
Que buen vídeo, me ayudó mucho
@andrik99999
@andrik99999 11 месяцев назад
que buen video me encanto
@orlandocaicedo8624
@orlandocaicedo8624 2 года назад
Genial!!
@jerry0146
@jerry0146 2 года назад
Gracias por la ayuda
@musicadefondo_oficial
@musicadefondo_oficial 2 года назад
Excelente video
@2dgames717
@2dgames717 2 года назад
muchas gracias me sirvió
@jeanpaulf19
@jeanpaulf19 2 года назад
excelente tutorial hermano, saludos desde Chile con nuevo presidente y mucha esperanza🙂🙂🙂
@Seriescompletas637
@Seriescompletas637 Год назад
Muchas Gracias
@cesarescober1164
@cesarescober1164 2 года назад
Muy buen video te felicito Tengo un problema fíjate que cuando está abierto el submenu y uso scroll wheel que desplaza la página web El submenu desaparece
@democraciapersonal
@democraciapersonal 2 года назад
Magtinus podrias hacer otro tutorial de una pagina web completa porfas?
@VisualAvalon
@VisualAvalon 2 года назад
Si, estoy pensando en diseñar la paginade RBG Escuela... Me gusta mucho su diseño así que eso está ahí en proceso de creación. Saludos!
@oswaldofranciscoeuanchi9737
@oswaldofranciscoeuanchi9737 2 года назад
@@VisualAvalon si has la página web completa saludos
@jorgemiguel1827
@jorgemiguel1827 2 года назад
Muy Buen Videooo Muy Util
@edwarZEDV
@edwarZEDV 2 года назад
Tienes mis respetos
@TaniaRoldan-jq5zt
@TaniaRoldan-jq5zt 7 месяцев назад
HOLAA ME AYUDARON MUCHO TUS VIDEOS... AHORA TENGO UNA DUDA SI EL MENU LO QUIERO RELACIONAR CON UNA BASE DE DATOS MYSQL COMO HAGO? PARA REALIZAR UN ABM (ALTA-BAJA-MODIFICACION)
@kevinsalazar2005
@kevinsalazar2005 2 года назад
Eres el mejor
@hectorbescobar
@hectorbescobar Год назад
NUEVO SUSCRIPTOR.
@gustavobeltran5897
@gustavobeltran5897 4 месяца назад
Buenas tardes excelente tutorial, ya lo hice y lo ajuste a mi necesidad, pero tengo un problema cuando lo monto en una pagina con frames, el frame principal o mainFrame no me deja ves todo el sub menu, como hago para que el submenu quede por encima del mainFrame.
@victorcabrera7380
@victorcabrera7380 Год назад
Hola Cristian hice el diseño de este ejercicios medianamente lo hice pero algunas cosas que no se porque no me salio tendré que repasar los código en html y css haber donde tengo el error, te mando un saludos de Buenos Argentina victor
@isidrogironasalvador8978
@isidrogironasalvador8978 2 года назад
Buen trabajo. Un duda quería poner el logo en la barra de menús a la derecha y que se vea en la pantalla pequeña, pero no lo logro. ¿Podrías ayudarme?
@patriayvida4209
@patriayvida4209 2 года назад
Hola!!! Muy Buenos todos tus tutorials!!! Ah!! Cómo es eso de """""ataf""""??? Please ! No logro ENTENDER.
@diegofernandez9124
@diegofernandez9124 11 месяцев назад
estimado tengo 2 problemas, logre que me quede la barra de navegacion exactamente igual pero a la hora de escribir contenido en el body no me aparece nada en el navegador. Note 2 problemas, cuando borre el background que le pones al header en color blanco apenas comenzas con los estilos logre que aparesca el texto pero me aparecio arriba de todo, como si fuera parte del header y no del body como realmente lo estoy poniendo. Que puede ser? podrias subir el codigo?
@pablovelazquez4897
@pablovelazquez4897 2 года назад
Buenas cuando haces el responsive porque la casita se va al medio si te pones encima? Un saludo.
@josemaidana1147
@josemaidana1147 2 года назад
Espectacular el Tutorial, muchas gracias. Te consulto ya que al agregar un submenu dentro de cualquiera de los otros ítem, el submenu siempre se muestra en el mismo lugar y no debajo de su padre. Podrías darme una idea de cómo solucionarlo? Saludos desde argentina
@sabrirussell4266
@sabrirussell4266 Год назад
Pudiste solucionarlo?
@leonciogrullon
@leonciogrullon 2 года назад
Gente del ITLA por aquí!
@Carli180
@Carli180 Год назад
Como agregar un submenú anidado, es decir, menú principal, submenú y un submenú dentro de este y responsive. Gracias.
@88mayinbu
@88mayinbu 2 года назад
Muy buen trabajo amigo, me podrías compartir el código del menú porfavor 🙏??
@fgughy
@fgughy 3 месяца назад
me perdi en el ressponsiv.... ..a repasar .. gracias
@prosperopastorcuevaizquier4910
@prosperopastorcuevaizquier4910 4 месяца назад
si el nav>ul>li llegara haber una propiedad como margin como resolveria sin quitarle el selector? yo-quiero-un-heroe.jpg
@santiagocabrera5153
@santiagocabrera5153 2 года назад
tengo una duda , si quiero hacer una media querie pero para 420px que deberia cambiar
@yadirasalas6768
@yadirasalas6768 2 года назад
MagtimusPro y como hiciste tu logo? en canvas? es que yo lo hice ahí y cuando lo inserto me sale enormeee, o usas alguna página donde descargas como gif? o si es meramente png o jpg?. Gracias mil MagtimusPro
@cientifica9150
@cientifica9150 Год назад
Creo que en Canvas puedes editar el tamano del proyecto, intenta usando un tamano mas pequeno en las configs de la pagina Canvas
@aaronacosta2045
@aaronacosta2045 Год назад
Amigo una pregunta, en caso de que quiera hacer mi menu en el lado derecho? como lo envio para alla?
@khrissmannix4204
@khrissmannix4204 3 месяца назад
Hola. Buen video. Me pasa algo y es que al dar clic en la parte azul me abre el menú y no sé por qué. O sea, solo debería abrir al presionar en el icono, pero sigue desplegándose en cualquier parte de la barra si doy clic. Estuve revisando el video una y otra vez y lo tengo igual ( creí que con darle un ancho de 26px al label igual que tú me funcionaría). Pero no sé por qué a ti te funciona y a mi no. ¿Tienes alguna sugerencia? Te lo agradecería. Saludos.
@masterverso817
@masterverso817 2 года назад
Hola podrias hacer un video de Indicador de cargar y cuando se cargue salga tu pagina Web????
@kreiger8912
@kreiger8912 Год назад
tengo un gran problema y no se el porque. estoy muy atarado en la parte del paddin de 14px para que guardar un espeacio entre ellos. ps se me desfasea no se si es por angular el cual uso pero del resto aun no me da los li crean paddin por todos los lados pero no se quedan dentro del ul osea su padre
@jeancarlostorresarmas3128
@jeancarlostorresarmas3128 2 года назад
Hola, como se llama el estilo de texto y color de tu VSC ?
@Angel-cg2cl
@Angel-cg2cl 2 года назад
Hola alguien sabe porque no se me reflejan las animaciones en la pagina web?. No me pasa solo con esto, ya en varias proyectos he intentado usar animaciones pero no se me reflejan en la pagina. Alquien sabe si necesito cambiar alguna configuracion o algo por el estilo????
@DSCamiloCOL
@DSCamiloCOL 2 года назад
Buenas noches, que herramienta usas para hacer el autorefresh mientras vas haciendo cambios en el código y no estar dando F5 en el navegador. Gracias
@luisguerrero8767
@luisguerrero8767 Год назад
utiliza live server extension de visual code
@FidelEmilioSusanaJimenez
@FidelEmilioSusanaJimenez Год назад
👽😍
@sharonlopez7613
@sharonlopez7613 Год назад
Como puedo hacer si quiero mas de un submenu???
@nettogrowthpartners9567
@nettogrowthpartners9567 Год назад
Cristian perdón por corregirte pero así como me estás mejorando enormemente en html y css quiero aportar algo -> uppercase (áperqueis), ease (íis), height (háit), image (ímish) (Advertencia: pido disculpas por el crimen al poner la pronunciación como sonaría en español, pero es para no hacer largo este post con mas explicaciones)
@Code__Play
@Code__Play Год назад
Creí que image sonaría Imash 🥴 Pero bueno comentario.
@nettogrowthpartners9567
@nettogrowthpartners9567 Год назад
@@Code__Play tenés que acentuar en la i y pronunciar como si fuera una y (de Argentina) o el comienzo de una sh. La a tenés que pronunciarla como una i muuy cortita.
@Code__Play
@Code__Play Год назад
@@nettogrowthpartners9567 gracias.
@alejandroeliasdiazorellana257
No pidas perdon, es mas podrias hacer un video tutorial, encontre excelente tu idea, el ingles deberia enseñarse como tu lo has hecho, y luego aprender a leer y escribir, ya sabiendo hablar
@nettogrowthpartners9567
@nettogrowthpartners9567 Год назад
@@alejandroeliasdiazorellana257 Gracias Alejandro! Tengo ya grabadas 60 lecciones de pronunciación de Inglés. Tengo que promocionarlo.
@K_bridgett
@K_bridgett Год назад
Hola buenas quería saber como poner una imagen en el submenu, por ejemplo las redes sociales de alguien, la imagen de la red y a la par el nombre de la persona y al apretarlo me lleve a su cuenta
@vickymora04
@vickymora04 Год назад
Disculpa, la verdad me perdí un poco, para que elemento debo poner el fixed para que me quede el menú fijo arriba y que no se pierda cuando baje en la pagina, eso es lo que siempre me confunde :(
Далее
como HACER un MENU DESPLEGABLE en html RESPONSIVE ✅
30:01
Crea una Página Web Responsive con HTML y CSS
1:24:20
Просмотров 15 тыс.
Tarjetas CSS con efecto HOVER PARALLAX
37:18
Просмотров 23 тыс.
Menú desplegable con HTML y CSS
25:36
Просмотров 40 тыс.