🔵 Creando Navegación con Tabs o Pestañas con HTML, CSS y JS

Подписаться 21 тыс.

Просмотров 100 тыс.

50% 1

En este vídeo tutorial te enseñare a como crear un Menú de Navegación con Tabs o Pestañas para tu sitio Web, y lo estaremos realizando con HTML5, CSS3 y JQUERY
► DESCARGAR PROYECTO: www.mediafire.com/file/eil6zk5...
► CODIGO ONLINE: codepen.io/CodyTron/pen/QgWpxv
▼ REDES SOCIALES ==============================
► FACEBOOK:
/ codytron.tutos
► GRUPO DE FACEBOOK: / 284413078641210
► TWITTER:
/ codytrontutos
Apoya al canal 🅿 💲💲
www.paypal.com/paypalme/codyt...
===============================================
SUSCRIBETE, ES GRATIS:
/ codytron

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

1 июн 2017

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 181

@jorgejimenezpaucara5951 5 лет назад

Ni tienes idea de cuanto me ha servido, ¡Muchas gracias!

@CodyTron 3 года назад

Hola Amigos programadores!! Espero que estén muy bien. Para los que no lograron hacer esta Navegación con Tabs, les recomiendo que puedan comparar su código con el trabajado en el video. Aquí tienen un enlace para que puedan visualizar todo el código trabajado aqui: codepen.io/CodyTron/pen/QgWpxv

@nadiamad7 6 лет назад

Genio total, se entiende perfecto!! Mil gracias!!

@rudasoler 5 лет назад

Llevo jugando con esto menos de un mes y esta ha sido la mejor ayuda. Gracias

@expresstutorial3255 5 лет назад

Sigue tambien hare uno pero solo con js

@parkouralien3606 3 года назад

muchas gracias por tu aporte a la comunidad de programadores saludo desde Republica Dominicana...! :)

@ricardonavarro526 2 года назад

Te amo, desde el 2021 este tutorial es muy bueno jaja !! saludos y gracias !

@M1LiLiZ 4 года назад

Gracias, me encantó que expliques las funciones de cada parte del código.

@anuarsabgue9220 4 года назад

Excelente explicación. Muchas gracias y saludos desde México

@williamluque5268 6 лет назад

excelente.... gracias a tus vídeos el logrado hacer un menú 3d en con sub-menu implementando con este tabs..difícil pero placentero con el resultado...solo unos retoques al contenido y por fin habré terminado.

@jassantana8784 6 лет назад

excelente vídeo muy practico para los que estamos comenzando gracias.. sigue publicando!

@silvestredasilva 4 года назад

¡Excelente trabajo! muchas gracias , me ha sido de gran utilidad-

@paladin2978 4 года назад

Muy buena demostración, gracias por enseñarme, saludos...

@pataslocas4595 6 лет назад

¡Muchas gracias!, me funcionó, saludos.

@joserobertomantillavillanu8193 5 лет назад

Espectacular. Voy hacer un motor de reserva. Fácil.

@agustinesquendefe8099 Год назад

Te ganaste un suscriptor bro, excelente video 🙌🏼👌🏼

@cristianbenitez7518 3 года назад

Eres un Crack. Gracias amigo, no todos los héroes usan capa.

@CodyTron 3 года назад

jajaja Gracias amigo! Saludos 😉

@Miguelangel-yu8ms 5 лет назад

Graciaaaaaaaaaas, estuve como casi tres horas buscando como hacer lo que tu me acabas de explicar :,v

@daviscriollo8539 3 года назад

Excelente muy sencillo y práctico gracias por compartir tu conocimiento.

@CodyTron 3 года назад

Gracias a usted por compartir su experiencia con el video. Saludos 😉

@andresjosa7129 3 года назад

Si me sirvió tu tutorial master. Gran video.

@aldomartinez20 6 лет назад

Exelente video, muy util, te agradezco muchisimo! Un abrazo muy grande! SIGUE ASI!

@CodyTron 6 лет назад

Gracias amigo, igualmente un Abrazo ;)

@sandramejia610 3 года назад

Muchas Gracias, excelente video

@vladimircg9541 2 года назад

Genial, Muchas gracias...!

@DanielAlcoleas 2 года назад

Muy bueno!!! Gracias!!!

@DyabloHot 7 лет назад

es lo que estoy haciendo actualmente y no encontraba como hacerlo, gracias me sirvio de mucho

@CodyTron 7 лет назад

Ouh Yeah! Encontraste justo lo que necesitabas en CodyTron XD Saludos Amigo ;)

@expresstutorial3255 5 лет назад

Excelente video, yo estoy apunto de hacer algo similar pero solo con JavaScript ;)

@pruizca 4 года назад

Gracias maestro... gran aporte

@smylmvv Год назад

Muchas gracias amigo! :)

@varosan 4 года назад

muchas gracias!!!! excelente tutorial

@ing.alexandervarela6200 6 лет назад

Saludos desde Venezuela, tengo una inquietud. En primer lugar felicitarlo por la explicación muy clara, en segundo lugar quería solicitarle asesoramiento en lo siguiente. Lo que explicaste me sirvió muchísimo para mi proyecto pero tengo un detalle en la última opción de mis tabs quiero que la acción sea que retorne a otra página por ejemplo que la pestaña diga salir y me envié a un menú principal.

@ronaldchoque7055 Год назад

Felicidades muy bueno el video...sigue adelante....

@sebastianfuentesrios5861 Год назад

gracias me salvaste en primer año de la u de la universidad de OÑATLE 😈

@Bastianblack43 Год назад

me ayudo mucho, gracias :3

@rogerespiriturojas 10 месяцев назад

mill gracias por tus videos

@arnaldoalamos9156 7 лет назад

Muy buen video, bien explicado y sencillo , se agradece mucho ,exito y que sigas creciendo :)!

@CodyTron 7 лет назад

Gracias Arnaldo, me alegra que le haya gustado este tutorial, Suscribete. Saludos ;)

@franciscoasousa851 Год назад

Excelente video!! Obrigado por compartilhar conhecimento.

@moisessantibanezreyes3134 7 лет назад

Excelente video. E ayudará para implementarlo en un proyecto en el que estoy trabajando. Gracias por el tutorial. Saludos

@CodyTron 7 лет назад

Oh que genial que lo implementes a tu proyecto, me alegra saber que te sirvió :) Saludos amigo ;)

@jhonuru 4 года назад

Excelente video amigo.

@bazurto_dev 6 лет назад

Excelente vídeo amigo Saludos

@franciscogerardogonzalezgu7182 5 лет назад

Muchas gracias por el aporte mi buen

@davidpaintings1752 3 года назад

me encanto la información tu explicación todo muy firme

@CodyTron 3 года назад

Gracias David!! 😁

@purecodingview6916 3 года назад

gracias, me sirvió un montoón!!

@alexdavidgallardopariahuac7790 5 лет назад

Sigue así, llegaras lejos bro

@JSam95 4 года назад

gracias muy buena explicación

@arturomarquez2622 2 года назад

Gracias broo excelente video

@texco1000 6 лет назад

muy bien explicado me gusto

@EmmanuelHerrera100 6 лет назад

Excelente video maestro.!

@CodyTron 6 лет назад

Genial :D me alegra que te haya gustado. Saludos 😉

@angelaybar517 3 года назад

genio total, gracias por compartir el codigo!

@CodyTron 3 года назад

No hay de que. Gracias a ti por comentar 😀

@carlosf.1434 5 лет назад

Gracias por compartir tus conocimientos. Tengo una pregunta: Quisiera crear un formulario por ejemplo un formulario de registro de clientes pero quisiera manejar tabs es decir tab 1: informacion general , Tab2 : Informacion bancaria, Tab3 : Informacion contable y con su respectivos botones de adicionar modificar eliminar cliente. Esta idea se podria hacer con este ejemplo? Gracias.

@luisorlando1881 3 года назад

Gracias, muy amable, cambiar el texto por imágenes ejemplo un menú de wok (cambiar el texto por varias fotos de wok distintos modelos horizontales

@La-FL-DS-MDFR 4 года назад

Muy buen vídeo !

@soy_kaizerplay 4 года назад

Tengo un proyecto en mente para mi ciudad, y quería hacer esto, evitar la recarga de pestañas, creo que puede servirme de mucho, así que muchas gracias

@hectormenguez90 6 лет назад

muy buena explicación

@mancrema2011 2 года назад

gracias por tu aporte!! por favor dime como lo aplico al wordpress, ya que ahora nos obligan que las paginas web esten adaptadas para las personas con discapacidad visual, y usan solo teclado, entonces piden que toda la pagina trabaje con la tecla tabs y pueda sombrearse todas las opciones de la pagina. ayudame por favor, muchas gracias!!

@Meownai 6 лет назад

Hola! estaba siguiento tu totoria y me salta la duda, quiero cambiarle el color activo a blanco, entonces donde debo cambiarle el color a las letras del tab para que se note dle fondo blanco? de antemano gracias!

@jhostingabrielherreravarga378 5 лет назад

pregunta yo tengo el alleycode editor y todo iva bien hasta que lo teniamos que enlazar al font-awesome.css no se enlaza....

@FormandoLaWeb 7 лет назад

Q buen video amigo ;)!! Saludos!! ;)

@CodyTron 7 лет назад

Graciaaas FLW. Saludos ;)

@FormandoLaWeb 7 лет назад

;)

@marianghelmonge9836 4 года назад

Muchas gracias! :D

@kevinamc 6 лет назад

Una pregunta tengo un problema hice un formulario de registro y lo dividi por pestañas Tabs, es decir son 4 pestañas que se llaman: datos personales, información laboral, estudios realizados, referencias laborales, el problema es que cuando estoy en la primera pestaña me presenta todos los formularios ahi osea unidos uno debajo de otro, deberían estar separados cada uno en una pestaña y no unidos uno solo, me podrias ayudar gracias!!

@PsyDunkelheits 3 года назад

Tome su like buen hombre :)

@CodyTron 3 года назад

Le agradezco mucho a usted, buen hombre jaja. Saludos 😉

@acaros1991 6 лет назад

hola muchas gracias por la ayuda tengo un problema, lo que sucede es que en cada tab tengo una tabla y cuando ocupan la misma altura todo esta bien pero cuando una tabla tiene mas filas que otra y ocupa mas altura, al pasar de un tab a otro se mueve todo hacia los lados cómo puedo evitar eso

@sporegamer2005 4 года назад

Un crack me sirvió mucho

@helverorlandomoreno5806 3 года назад

Gracias, gracias

@xjxqxs 6 лет назад

amigo si pongo un link hacia un archivo en alguno de los tabs y luego quiero que regrese al mismo tab , como puedo hacer?

@jmartincastilloc 7 лет назад

Tan complicado es mandar un saludo jajaja ;) GRANDIOSO VIDEO

@CodyTron 7 лет назад

Jaja Gracias amigazo, Saludos ;)

@nicolasjaime9971 3 года назад

Felicitaciones, todo funciona a la perfección, una consulta como hago para crear un link desde el footer que llame a una de las pestañas, intenté con un href, con un ancla pero no me lleva a ningún lado...?? Gracias.

@GerardoRequiz 6 лет назад

Hola, muy buen tuto amigo pero si en vez de inicio yo quiero que cuando cargue la web este activo sea servicio por ejemplo o cualquiera de los otros que debo hacer?

@santiagobc3697 3 года назад

Amigo te amo

@LuisAngel.A.P 3 года назад

Gracias Brother

@ChoVE_Official 3 года назад

GRANDE.!!!

@CodyTron 3 года назад

Gracias! Saludos 😀

@VisualAvalon 7 лет назад

Buen vídeo amigo, saludos, excelente, compa.

@CodyTron 7 лет назад

Graciaaas Magtimus! :)

@djinn8274 7 лет назад

woooow dos gigantes se saludan!! soy infiel, estoy suscrito a los dos jaja, bien muchachos!!

@VisualAvalon 7 лет назад

Jajajajajajajajaja, si #Djinn x somos amigos. saludos

@djinn8274 7 лет назад

arrrrrrriiiiiiba la amistad!!!!

@VisualAvalon 7 лет назад

Siiiiii! Weeeeeee, falta el bizcocho weeeeeeeeeee!

@moi12freg 7 лет назад

q buen tuto amigo!!;)

@CodyTron 7 лет назад

Gracias amigo por estar siempre ahí. Saludos ;)

@moi12freg 7 лет назад

;)

@nicobellini79 3 года назад

Hola, Funciona perfecto, muchas gracias. Consulta: Como hago que por defecto inicie en la pestaña 2 ?

@rociolopez6827 3 года назад

Esto se puede insertar en un ¿div? como enlazo las hojas? al inicio como señalas?

@jhorsroldanlara1251 4 года назад

muy buen video mano

@TutorialesEle 2 года назад

Hola como hago lo mismo pero ahora que me muestre el contenido de mis archivos .html?

@yefersonardiles9262 4 года назад

muy bueno el video me sirvio muchicimo, construi el codigo paso por paso , solo que los iconos no me salen , pero recien termine el video asi que vere que puede ser .... gracias te pasaste, ahora a reeditar el codigo CSS para ajustarlo a lo que quiero , gracias

@LesCodes 4 года назад

Hola, antes que todo, muchísimas gracias, me sirvió bastante. Ahora, tengo una duda enorme, tengo que hacer una página con un menú lateral que tiene aproximadamente 50 secciones, 10 principales y 5 sub-secciones cada sección principal. ¿Cómo podría hacer para que el código html no sea tan largo? No pienso escribir todas las secciones y subsecciones en el mismo html ¿o esa es mi única opción? Porque la información que pondré es enorme.

@labassproject2897 3 месяца назад

super claro wey, me pregunto si podre modificar esto para que me lleve a distintas partes de una lista desplegable , deseame suerte

@Bingo_1408 6 лет назад

no me enlaza al js, pongo el codigo y lo guarde como javascript pero no me sale la alerta de funciono ni nada tienes idea que pueda ser, todo me salio bien menos el jquery

@Dovahkiin507 4 года назад

Porque no explico como enlazar la librería de jquery, en el html el ya tiene ese import pero no lo menciona.

@alexandronezihramirezgaona8127 3 года назад

estoy haciendo algo similar pero tengo que introducir una galería abajo de cada Tab lo cual me a dado problemas.

@marcelogn6225 7 лет назад

Buen video, me hubiera servido hace un par de semanas, ya programe mi pagina de modo que cada "tab" te lleva a otra pagina y no es en la misma como enseñas en el video :""v. Buen video bro!

@CodyTron 7 лет назад

Gracias amigo, al menos te gusto. Saludos ;)

@JuanErickBeltran 6 лет назад

muy buen tutorial, pero quisiera en xml para una entrada en blogger. se podria?

@sidsid2263 6 лет назад

I don't know what your talking about but its pretty helpful thumbs up

@luisdelpezoreyes8410 6 лет назад

Muy bueno el vídeo amigo... cómo puedo implementarlo con formularios para registro de datos

@willianrafaeltorrealbagonz3146 6 лет назад

Saludos amigo. Muy bueno tu vídeo tutoriales, pude resolver muchas cosas. Pero ahora, se me acaba de ocurrir una idea. Crear un formulario con tabs, dentro de otro tabs. Por ejemplo, unas pestaña país que contenga dos pestañas mas, registrar y listar país. Me podrías explicar como hacerlo. La verdad e estado buscando y no consigo algo parecido. Si me puedes ayudar te lo agradeceria.

@mahuerkyock9369 2 года назад

Muy bien

@capuchinoroyale412 7 лет назад

buen video me sirvió mucho

@CodyTron 7 лет назад

Gracias por comentar amigazo :) , me alegra que te haya servido. Saludos ;)

@thegood5972 2 года назад

Hola alguien me puede ayudar con la parte de main.js no puedo activarlo en la pagina que estoy haciendo.

@fershowfershow3164 Год назад

hola tengo una duda todo me funcionó y gracias por ello pero tengo un boton de cerrar sesion y utilizaste 32:48 el href y ahora ese boton de cerrar sesion no funciona podrias decirme como podria funcionar de nuevo el boton de cerrar sesion mi pregunta es que si hay otra manera para que funcione mi boton 😅

@juanestebancruzreichert7563 6 лет назад

Que buen canal

@danielgarcia-vz2fq 6 лет назад

EY me salvaste gracias

@chikageraidon 7 лет назад

Estuvo genial, podrías hacer un blog? me ayudaría mucho

@CodyTron 7 лет назад

Pues tengo planeado crear uno para Codytron mas adelante. Saludos ;)

@joseg6324 7 лет назад

gracias, me sirvio

@CodyTron 7 лет назад

Me alegra que te haya servido, asi mismo puedes ver mas de mis tutoriales que seguramente tambien te gustaran. Saludos ;)

@Hielodev_cortos 2 года назад

36:43 al tocar un menu se quita todo el texto y sale nada. que hago?

@marcelogn6225 7 лет назад

Disculpa, tengo una duda. Hay alguna forma de que los tabs vayan a la izquierda en vertical en vez de arriba en horizontal?. Lo que pasa es que tengo varios y se me acomoda mejor de esa forma. Te agradecer[ia mucho si me ayudas plsss

@expresstutorial3255 5 лет назад

Muy sencillo