tutorial html y css | crear menu con animacion en css3

[@titokrissel4474]

Desde la Argentina deseo darte las gracias por el Tiempo, Modo y Claridad con la que has desarrollado tu explicación. Muchos enseñan mucho, pero sin la claridad destacada de tu modo.

[@tavolozano7179]

Claro y preciso, tenga su like buen hombre y un suscriptor mas. Tus videos trascendiendo el tiempo 11 años despues

[@corbettoangel]

Excelente video de como hacer un menu sencillo, entendible, práctico y sin mucho rodeo. Felicitaciones, voy a chequear todos los tutoriales, son muy interesantes y permiten ayudar de una mejor manera a la realización de nuestros proyectos

[@thekookero]

Quedé impresionado con la claridad para explicar! Sin duda de los mejores videos que he visto desde que me inicié en esto de los sitios web. Yo trabajo en Dreamweaver, por la facilidad de diseño aunque ahora quiero aprender en detalle lo del html por tanto este video está preciso, pero no cree el index.html donde hice el menú y luego una pestaña index_style.css pero no me reconoce los cambios de estilo, qué debo hacer para que estos se enlacen?

[@joelperezperez9752]

Es una barra muy sencilla pero aveces no sabemos como hacerlo, !Gracias por compartir el conocimiento¡. Saludos!

[@keyquotes]

De nada! A veces lo más sencillo es lo más elegante! 😜

[@bulmavegeta23]

me gusto tu video muy bueno, y lo mejor de todo es que si funciona el código no son solo mentiras como algunos. gracias

[@Daniel23011988]

grande maestro, mas claro no se puede explicar!

[@keyquotes]

ese subrayado azul lo pone el navegador por defecto para indicar que es un enlace, para quitarlo tienes que añadirle en css al enlace la propiedad font-decoration:none; por ejemplo si tienes un menu seria en css: ul li a{font-decoration:none;} (si no te funcion prueba a añadir esa propiedad en: "ul li{font-decoration:none}")

[@keyquotes]

tanto "display:inline;" como "float:left;" se aplican al ul li{}, tienes que funcionar solo tienes que hacer unos cambios en los margenes del li, pero eso es cuestion de estetica, para ponerlo en horizontal sobra con ponerle uno de los dos, pero no le pongas las dos propiedades, solo o "display:inline" o "float:left;" aunque yo te recomiendo "float:left", es mas sencillo trabajar con el un saludo

[@ezeqpo]

Muy buen tutotial. Me gustaría saber como hacer para que los botones tengan colores diferentes... que debería modificar en el código para poder hacerlo?

[@keyquotes]

al div que contiene todo el menu le tienes que poner la propiedad: "position:absolute;" esto sirve para que este div se encaje segun el ancho y el alto del navegador, no me acuerdo muy bien del video y no se si creé un div que contiene el menu, pero si no aparece simplemente tienes que crear un div que coja dentro todo el menu y listo. un saludo

[@keyquotes]

eso ocurre porque no pones la etiqueta de reset en css, por si no sabes lo que es, son unas propiedades que se ponen en css para que el navegador no añada sus margenes y paddings por defecto. en css, al principio del todo tienes que poner: *{margin:0px; padding:0px;}. con esta linea de codigo evitaras que el navegador te añada margenes y paddings por defecto un saludo

[@christianbarillas4013]

hace 10 año queee wow se merece un like 👍🏻

[@keyquotes]

es muy sencillo, simplemente tienes que añadir: "float:right" al div que contiene el menu, en el caso del video seria: div#menu. tambien hay otra manera de hacerlo que seria: añadirle al div#menu: "position:absolute" y "right:0px" puedes probar con las dos opciones, las dos crean el mismo efecto. un saludo

[@keyquotes]

tienes que ponerle la etiqueta href, y desde css a esa etiqueta le añades la propiedad "text-decoration:none;" este codigo lo que hace es quitarle la linea de subrayado, por supuesto tambien puedes cambiarle el color azul con la propiedad "color:red" un saludo

[@virginiakletzl]

Hola! Gracias por tu tutorial!! Está buenísimo!!. En vista previa lo veo perfecto en Google Crome y Ópera. En Mozila no se ve el movimiento. Y en Internet Explorer, no se puede ver las esquinas redondeadas. Ojalà me puedas contestar. De nuevo Gracias desde Buenos Aires!!

[@heribertoflores8387]

Muy bueno y facil, está excelente.

[@keyquotes]

la etiqueta doctype html sirve para que el navegador sepa en que lenguaje estas programando y la etiqueta meta sirve para decirle en que idioma estas programando, es decir, el tipo de caracteres que vas a mostrar en la web un saludo

[@andyt.alvarez5644]

muy buena bro!!!!! pero tengo una pregunta se podria hacer con sub-menus???

[@keyquotes]

para hacer que flote tienes que poner en "ul li" la proedad "float:left", despues para separarlos y que quede mas estetico le añades margenes con la propiedad "margin" un saludo

[@keyquotes]

rn mozilla no se ve porque en las propiedades de css3 tienes que poner el prefijo "-moz-", es decir, donde pongo en el video "-webkit-", tienes que añadir otra con "-moz". En IE no funciona si es la version 9 o inferior, pero en la version 10 si que funciona si pones el prefijo "-ms" un saludo

[@keyquotes]

no lo puedes ver porque no tiene buena resolucion o porque no se hace demasiado zoom? espero tu respuesta para poder mejorar en futuros videos un saludo

[@andresvega6001]

Genial tu tutorial hermano espectacular manera de enseñar :) recomiendado.

[@keyquotes]

para poner cada item del menu de cada color tienes que poner a cada uno, una id diferente, es decir, por ejemplo en "inicio"le pones la id='item1', a "videos" le pones id='item2' y esas id desde css le pones colores diferentes, asi de facil un saludo

[@JuanMartinez-qf7lb]

Hermano gran video muy bien explicado.... pero tengo una duda, cuando termino la lista si tiene efecto y todo eso pero no se alinea con el margen izquierdo, me queda un gran espacion como lo puedo resolver???

[@Hufsa]

muchas gracias por tu video, me ha iluminado

[@jeidervillamizar]

Mil gracias hermanito, hermoso ese menú

[@RamzyElias]

Gracias. Soy de Egipto. el video increíble.

[@keyquotes]

no trabajo con dreamweaver, sino con notepad++, que es un editor de texto, para trabajar en dos hojas, es decir una con html y la otra con css tienes que enlazar en la hoja de html el css, tengo un tutorial donde explico esto. no te puedo poner el link en el comentario pero pasate por mi canal y busca: "tutorial html y css etiquetas basicas de html5 parte 1". Espero haberte ayudado un saludo

[@keyquotes]

no se si te he entendido, creo que lo que me ha querido decir es que a parte del div del menu, has puesto uno tuyo al lado izquierdo pero no funciona. Si es eso, no te tendria que salir ningun problema. al div del menu le pones "float:left;" y la div tuyo le pones "float:right;" y tendria que funcionar un saludo

[@someramdomhelthydude0019]

keyquotes muchas gracias por el tutorial me sirvió de mucho

[@vangeluz777]

Excelente muy bueno y bien explicado !!!

[@PanqeBoones]

Lo intento pero nomas no logro saber dónde colocarlo, en "div#menu ul li...." o dentro de dónde, sé que es en el CSS pero no me sale...lo checaré alrato, y muchas gracias de verdad! es para un proyecto a entregar el miércoles y vieras que de verdad me has ayudado con responderme tan pronto, gracias de nuevo :)

[@keyquotes]

si solo se mueven las letras puede ser que el efecto de hover lo hayas puesto que afecte a las letras y no a la etiqueta li un saludo

[@lapeke222]

Hola, disculpa yo hice el código igual al tuyo y tampoco me funciona el -webkit-transition: padding-left 0.6s; y esoty utilizando chrome =/

[@crapypastaparatodos9901]

una pregunta amigo si tengo agregado tambien la etiqueta Inicio como quedaria configurado la hoja de estilo?

[@keyquotes]

si, lo tienes que colocar en div#menu ul li a{text-decoration:none;}. te pido disculpas, me equivoque al poner el codigo css, puse: "font-decoration" y es "text-decoration". un saludo

[@natalialopezcarmona2597]

Muchas gracias keyquotes me resultó muy útil, lo único que no me salió bien fue, que al pasar el ratón por los elementos de la lista además de aumentar a lo largo (por el margin-lef) también me aumenta a lo ancho y es lo que me extraña ya que mi página css es exactamente igual a la tuya, ¿podrías decirme a que se debe? Gracias :))

[@keyquotes]

aunque fuera sin transicion, si las propiedades que estan dentro del hover tienen que funcionar, pero si tienes el codigo igual que el del video tiene que salir, prueba a abrirlo con otro navegador un saludo

[@flaviosuana7984]

no se mueve la imagen pero si el texto no se que esta fallando le revisado y todo esta bien

[@RICHYBOY1998]

Hola. Muy buen video y gran menú, pero ¿cómo pongo la información en la página sin que se mueva el menú hacia arriba o hacia abajo? Gracias.

[@juaneblak8366]

esta muy chido ya lo hiceee!!!

[@jesuseduardonietohernandez6409]

Solo una duda para que sirve el Hover

[@abidnadid]

me gusto y me salio perfecto, lo que si noté es que en Internet explorer el ""div#menu ul li:hover{}"" no funciona, pero en chrome va perfecto

[@jogime]

hola, muy buen tuto, Me gustaría saber como poner enlaces o link para dirigir a las páginas del menu

[@diodios3091]

Buenazo rápido y conciso..

[@keyquotes]

no creo que sea un error de dreamweaver, las propiedades de css3 hay que ponerle la extension del navegador delante, es decir, en chrome hay que poner -webkit-, en mozilla -moz- en opera -o- etz... prueba a abrirlo en chrome o en safari que funcionan sin ponerle nada delante de las propiedades de css3, si sigue sin funcionar dimelo y hago una prueba en dreamweaver un saludo y suerte

[@ivanorozco314]

No funciona en dream weaver?

[@daniescalante6471]

Ayúdame he comenzado a trabajar en una pagina web pero que navegador me aconsejas usar para estar probando mi pagina web el detalle es que en firefox se ve de una forma y chrome hay algunas cosas que no están en el lugar correcto y como puedo hacer para que un div por ejemplo el footer este en la misma posición es que en firefox esta bien pero en chrome y explore me sale muy bajo.

[@keyquotes]

no cogio lo de css porque en el documento .html no lo entras bien enlazado, para enlazarlo bien tienes que poner la etiqueta de link dentro del "head", no me deja poner la etiqueta en un comentario pero puedes buscar en internet como enlazar la un css a un html un saludo

[@davidjdr]

buen tutorial exelente!!!!!.. una preginta como hago para porner informacion ala par del menu desplegable?

[@keyquotes]

en que sitio te refieres? no entiendo lo que quieres decir

[@davidjdr]

mira es exactamente a la par de Inicio Noticia a la par del menu desplegable,, yo vengo empezando con esto del HTML

[@keyquotes]

te refieres a como poner un cuerpo a tu web? es decir, un contenedor donde puedas poner toda la informacion de la web?

[@davidjdr]

exacto asi es tienes algun tuto?

[@keyquotes]

si, en mi canal hay un tutorial de como crear la estructura basica de una web. para poder hacer esto, primero tienes que poner al div que contiene este menu lateral, la propiedad: display:absolute; para que no afecte al resto de la web y se quede en la parte izquierda. El tutorial se llama: tutorial html y css | posicionamiento de divs en el contenedor general (basico) un saludo

[@chamizografico]

Muy bien explicado, excelente tutorial

[@frijolitovictor1513]

EXELENTE!!!!Si me funciono muchas gracias keyquotes

[@jeisongaona5474]

una pregunta amigo se puede hacer el mismo menu per que quede del lado derecho de la pantalla?

[@julianPasion]

excelente tuto ... pero como hago para darle click un boton x ejemplo incio y que me direccione a otra pag.. si le agrego la etiqueta a href="" lo que hace es subrayar en incio..perdiendo asi el diseño..hay otra manera??

[@PanqeBoones]

Ya resolví ese problema (es que soy nueva :( ) Otra duda! porque cuando lo vinculo a otra pagina me aparece una línea debajo del nombre de la pestañita "inicio"?

[@lucasmorana5580]

buenísimo bien explicado !

[@andresguevaralopezje]

muchas gracias Muy buen video

[@greciaprint]

excelente me suscribo...gracias!!!!

[@HablemosdeOfertas]

hola me encanto el menu pero sabes como lo puedo aplicar en Horizontal? eh intentando poner el Display:inline; y no funciona o con el float:left tanto el ul como en el ul li, seria de gran ayuda tu respuesta saludos

[@PanqeBoones]

Hola, cómo comienzo a trabajar SÓLO en la hoja css? tengo la version CS6 pero no entiendo cómo pasas de trabajar en dreamweaver a sólo esa hoja, y cómo la uno a la pagina para que pueda ver lo que hago (actualizarla y que salga el menu como lo haces tu)

[@bryancamacho5879]

Lo que esta dentro del head, ademas del title, es necesario?

[@keyquotes]

en este tutorial utilizo notepad++ pero normalmente utilizo sublime text 2

[@r0dr1g0ful]

que significa el DOCTOR HTML. Y LA " META " etiqueta que esta arriba del stylesheet ? ? ? Gracias !

[@darioperez36]

un poco laborioso pero el fin justifica los medios,Gracias

[@daniescalante6471]

Pues si creo que la resolución que yo tenia hacia que se viera mal.. cuando yo lo hago el texto del menu no me cambia de color y me queda subrayado he revisado bien tu código y el mio y pues no encuentro nada malo no se que sera..

[@jokisgonzalez]

hola estoy realizando una pagina con sublime text 2, este código me puede servir verdad? otra cosa como puedo hacer para que el menú quede de forma horizontal?

[@villangell]

saludos, quisiera saber como hago para asignarle un enlace a estas etiquetas sin que pierdan su apariencia tal como esta en este video y que el enlace funcione en toda la etiqueta?? por ejemplo, a la etiqueta "inicio" quiero asignar un enlace a otra pagina pero quiero que ese enlace funcione haciendo click en cualquier parte de la etiqueta inicio. gracias.

[@valentinbonillamora5135]

hola amigo antes que nada muy bueno excelente, una pregunta hice todo pero no me funcionan las transiciones, me podrias ayuda por favor

[@omark9991]

Hola amigo que tal! Muy buen tutorial me a ayudado mucho, pero queria saber como hacer el mismo menu pero que se desplieguen otras opciones?

[@hermanaschallengec.p115]

lo unico que tienes que hacer es poner otro nombre aqui inicio inicio inicio inicio inicio solo tienes que agregar otro nombre en esta lista html

[@olll-musica-j6564]

siquiero sub menus ..??

[@GenisRoVi]

Muchas grácias tio! muy buena explicacion!! :D THX

[@chuchito223]

muchas gracias me ayudo mucho

[@alnet79]

Muy buen aporte, solo te hago una consulta, no me funciona el web transition, sigo al pie de la letra el tutorial,probe tanto en el chrome y en el firefox

[@keyquotes]

no creo que sea el caso pero recuerda de decidle primero al navegador que esa propiedad es de css3, por ejemplo para chrome: "-webkit-transition:" un saludo

[@alnet79]

keyquotes gracias por el aporte!

[@nicolasgiraldo7397]

todo correcto pero al aplicar el a href para que funcione el menu me sale un boton que se ve feo y no queda bien nose como hacer que funcione este menu sin que se vea el boton que sale con href

[@CamunareRojoalberto1980]

buenas tarde por favor como se hace para hacer un submenu dentro de cada botón que uno coloque el pulsor encima de ellos y salga el otro submenu claro si se puede gracias

[@adrianaperez3190]

Excelente Video

[@jhonbeltran6845]

oye una pregunta me funciono y todo, pero quiero que la animacion me de a la derecha mira mi codigo, le puse right y aun asi se mueve a la derecha div#menu{ width: 200px; margin-top: 50px; } div#menu ul{ list-style:none; } div#menu ul li{ margin-top:15px; font-family:tahoma; font-size:25px; background-color:#639bb3; width:300px; padding-top:20px; padding-bottom:10px; border-radius:40px 0px 0px 40px; padding-right: 40px box-shadow: 3px 3px 6px #373c3c; -webkit-transition:padding-right 1s; color: white; } div#menu ul li:hover{ padding-right:50px; } .menu{ text-align: right; position:absolute; top:180px; bottom:630px; right:700px; left:1000px; }

[@rmora262]

muy buen tutorial gracias

[@juanmanuelmohedanobernardo7721]

amigo realize tu tuto pero cuando quise poner un div flotante del lado derecho la propiedad me la hace como los menus de la izquierda, ya cambie las propiedades de left por rigth y no funciona porfavor amigo llevo aproximadamente una semana haciendo cambios y no funciona D:

[@desisussu1584]

Hola, para poner el menú triangular en vez de redondo cuál es el código?

[@WR88IcZw]

Como le puedo hacer para quitar el color si pongo un enlace en el menu y que aparezca la manita en todo el "boton"??? muchas gracias por el video

[@HablemosdeOfertas]

gracias lo probare saludos

[@dianabenitez8362]

Que programa usaste para editar el codigo?

[@TheTorrow]

Oye gracias, pero esque no se como poner el texto a lado de la barra sera que me puedes ayudar?

[@pirataman23]

Hola que tal solo una consulta, según tu experiencia en diseño web... en verdad ya se esta dejando de utilizar flash en animaciones web , o eso es una opinión de algunos en la red

[@keyquotes]

esa afirmacion es verdadera, ten en cuenta que los dispositivos moviles o tablets no reproducen el contenido flash y hoy en dia la mayoria de visitas a las web se hacen a traves de un dispositivo movil, esto ha hecho tener que buscar alternativas a las animaciones como es por ejemplo css3, javascript etc un saludo

[@leonpostal13]

hola ! disculpa he seguido el codigoa detalle, pero lo he escrito desde simple text 2, todo bien hasta la creacion del menu,pero en css nada... puedes darme una ayudadita ?

[@carmeloenriquediazalarcon7111]

amigo a mi no mas se mueve el texto de adentro que ago

[@titokrissel4474]

Serías tan amable de darme una mano y explicarme como poner una alert() cuando hago clic en alguna de las opciones. Solo le faltó eso para los que estamos aprendiendo como en mi caso. Muchas Gracias

[@keyquotes]

para poner un alert() necesitas javascript y de momento no quiero meterme cone se tema, en youtube hay bastantes tutoriales basicos sobre javascript, veras que poner un alert() no tiene nada de complicacion, solo necesitas la funcion onclick pero te recomiendo que veas algun video de explicacion sobre ello un saludo

[@bramdonmurillo3757]

oye una ayuda este es mi codigo no entiendo porque no sale tal cual html menu desplegable Inicio ejercicio 1 ejercicio 2 ejercicio 3 y este es el css: { margin:0px; padding:0px; } div#menu{ width: 200px; margin-top:50px; } div#menu ul{ list-style:none; } div#menu ul li { margin-top: 15 px; font-family: tahoma; font-size: 18px; background-color:#639bb3; width:160px; padding-top:10px; padding-bottom:10px; border-radius: 0px 20px 20px 0 px; padding-left:20px; box-shadow: 5px 0px 10 px # 939393; -webkit-transition: padding-left 0.6s; color:white; } div#menu ul li :hover { padding-left:50px; }

[@cjva6526]

este el video es muy bueno pero hago el menu y alado tengo una table y cuando el menu se despliega la table tambien como hagopara q la table no se mueva

[@keyquotes]

recuerda que css3 todavia no esta formalizado para todos los navegadores igual, tienes que poner los prefijos como: -webkit-. En el video donde pongo "-webkit-" tienes copiar la misma propiedad pero en vez de poner "-webkit-" tienes que poner: "-o-" para navegadores opera, "-moz-" para mozilla y "-ms-" para IE 10. para IE 9 hacia habajo estos efectos no funcionaran, los tienes que realizar con javascript un saludo

[@jonyvilla23]

Y si quiero ponerlo horizontal, y con submenus ?

[@VEOVEOMAMONEOOO]

hola tengo un problemilla, copie todo tu ejemplo , y cuando paso el raton por encima, se me mueven las letras del menu , pero no lo que lo contiene azul , me entiendes? solo se mueven las letras, lo visualizo en chrome

[@catarinamartinhoalvoeiro7743]

Muy bueno!!!

[@rockyscarlet]

muy bueno el tutorial, te dejo un like

[@katyasalas]

excelente tutorial!!!

[@alphamoros4695]

Pregunta... y para poner que me enlaze a otra pagina en ese mismo boton, como seria?

[@irvinortiiz6037]

Buen tuto pero lo que kiero saber es como quitar en subrayado despues de poner el enlace en el div .... saludos

[@keyquotes]

para quitar el subrayado lo tienes que hacer desde css, por ejemplo pones a{text-decorartion:none} un saludo

[@irvinortiiz6037]

gracias me funciono bien ,,,,

[@belialdaniel16]

bien explicado :)

[@vuelacontenta8377]

Hola oye no me sale la primera parte del código html me sale pero NO SE CONECTA CON LA PARTE DE CSS y la verdad si me urge usarlo y como se lo implemento a mi pagina web?

[@adriankryeziu964]

Se tiene que llamar al archivo css (donde están escribiendo los códigos css) desde el archivo donde están poniendo los codigos html, por ejemplo en la parte del head ingresan lo siguiente Y se conectará con el archivo de estilo css que están trabajando.

[@GiancarloCarccamo]

muy buen video ere un CRACK

[@MarcoAntonio-wj8wo]

muy buen video..