Barra Lateral con HTML, CSS y Javascript, Sidebar Animado

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии • 109

  • @canatran1959
    @canatran1959 4 года назад +10

    Fazt no conozco tu nombre de pila. He visto algunos de tus videos y eres experto en muchos temas y no eres mezquino entregando tus conocimientos. Eso es maravilloso. Gracias por entregarnos tus conocimientos!!!

  • @orlmonteverde
    @orlmonteverde 6 лет назад +29

    Buen tutorial, como siempre, sencillo y claro. Me parece una gran idea mostrar mini proyectos sin librerías o frameworks, se convierten en material para consultas puntuales. Gracias por compartir y saludos desde Venezuela.

    • @FaztCode
      @FaztCode  6 лет назад +3

      Gracias Orlando, Muy pronto seguiré subiendo Mini Proyectos por este canal. Un Saludo y Mucha Suerte.

  • @KaliJS
    @KaliJS 3 года назад

    Yo me siento muy agradecido con la persona que este dando estos conocimientos.... Hoy aprendí a hacer una Sidebar con mucha elegancia jejeje gracias

  • @luismaocampo7866
    @luismaocampo7866 4 года назад

    El puto amo voy sobrado en el ciclo de informatica gracias a ti, heroe

  • @XenomFlautaDulce
    @XenomFlautaDulce 3 года назад

    Agradecido con el de arriba, era justo lo que buscaba. Intenté primero buscando en webs y blogs pero o no funcionaban o necesitaban jquery o simplemente no era muy estético.
    Te felicito por el esfuerzo que haces para explicarlo de forma tan didáctica y elegante.

  • @granadospadillaalberto5017
    @granadospadillaalberto5017 3 года назад

    No sabes lo que me acabas de ayudar. Mil gracias

  • @SebasPortu
    @SebasPortu 3 года назад

    soy muy nulo con todo este tema de los codigos, pero gracias a tus videos estoy empezando a comprender un poco mas como funciona todo. Muchas gracias! un trabajo genial!

  • @veronicahernandez2517
    @veronicahernandez2517 3 года назад +1

    Al fin consigo un video donde logro entender y hacerlo a la perfección. Gracias por compartir!

  • @miguelion
    @miguelion Год назад

    Muy bueno! Estoy iniciando en el desarrollo web y me dejó flipado esto!
    Personalmente quiero realizar una barra lateral fija (“A“) y que en otro lateral de la página (“B“) pueda mostrar contenido, pero tanto , como no me están permitiendo hacerlo como quiero y me mandan el contenido “B“ abajo de “A“. Que me recomiendan??

  • @SomosAndroid
    @SomosAndroid 6 лет назад +1

    Gran video hermano! Estoy estudiando JS y aunque no sepa casi nada porque recien empiezo, sigo tus pasos para aprender de igual forma y agarrar velocidad como la tienes tú, a la hora de programar y de pensar la logica. Saludos cordiales

  • @gustavoagramonhdez3746
    @gustavoagramonhdez3746 Год назад

    Gran video broo!!!! felicidades!!! apenas voy iniciando en la programación !!! algunos detalles me pasaron pero si lo logre!!!! saludos!!!

  • @dofepro
    @dofepro Год назад

    Buena Noche, muchas gracias Bro, muy buen aporte.

    • @dofepro
      @dofepro Год назад

      Gracias, en serio muchas gracias.
      podrias por favor subir, como hacer ese menu lateral responsivo? y como yo le integro ese menu a mi portafolio?

  • @davidtome2159
    @davidtome2159 2 года назад

    Era exactamente lo que estaba buscando, la rompiste toda, ¡gracias!

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

    Muchas gracias me ha servido de mucho y lo mejor de todo bien explicado y yendo al grano. Un saludo!

  • @yasserhenriquez5144
    @yasserhenriquez5144 5 лет назад +1

    Muy buenos tus videos de verdad que me han creado una gran base. Saludos desde Rep. Dom.

  • @softwarecafe5762
    @softwarecafe5762 4 года назад

    Videazo lleno de información, me molesto un poco el microfomo dura te el cierre pero es solo un pequeño detalle. Gracias por tremendo aporte, un saludazo y segui asi

  • @LeonelArtLab
    @LeonelArtLab 4 года назад

    Me he suscrito! Muy buen contenido; lo usé para crear una sección de letras de canciones que ahora se van a poder ocultar o mostrar sí aplico bien el código. Gracias, de verdad.

  • @MsSoldadoRaso
    @MsSoldadoRaso 3 года назад

    Genial, porfin algo sencillo y explicado para comenzar a entender lo de las navegaciones.

  • @cristianferreira3350
    @cristianferreira3350 Год назад

    Súper bueno !! El único problema q tiene es q al iniciar la página, el sidebar queda abierto y no cerrado !
    Saludos !

  • @juliomartinez7531
    @juliomartinez7531 4 года назад

    Excelente explicación, de esa manera es mas fácil entender y aprender el código paso a paso.

  • @yesidcalle01
    @yesidcalle01 5 лет назад +4

    Excelente tutorial, soy nuevo esto, explicas muy bien, estaba viendo el video de "node.js y mysql aplicación completa CRUD", como enlazaria ese tutorial con este menu, o algun video donde des un tutorial que tenga un menu lateral y acceda a la pagina que es al clikear sobre la opcion a proceder. Gracias, eres un buen profesor.

  • @maravargas5929
    @maravargas5929 4 года назад +3

    Me encanto la practica Fazt, sos un genio .
    Saludos =)

  • @reh.m3607
    @reh.m3607 2 года назад

    Me gusta mucho tu manera de explicar me suscribo

  • @rondonalejandro
    @rondonalejandro 4 года назад

    Muchas gracias por tu video, excelente trabajar sin cargar librerías. Saludos desde La Paz, Baja California Sur, México.

  • @jonnathan7443
    @jonnathan7443 4 года назад +1

    Un pregunta, como podria hacer que el cotenido de mi body se moviera según esconda a muestre la barra lateral. Llevo rato intentandolo pero no doy con el chiste.

  • @luisleon4190
    @luisleon4190 4 года назад

    gracias amigo...mira y si quiero ponerle el boton de color blanco que se le cambia???

  • @TheBrayanGallo
    @TheBrayanGallo 4 года назад +1

    Excelente tutorial, sencillo y rapido de implementar.
    5 estrellas

  • @gonzalosurribassayago4116
    @gonzalosurribassayago4116 6 лет назад +1

    hola como puedo hacer para que la bara crezca hacia abajo a medida que la pagina crece es decir a medida que rellene la pagina para que la parte negra de la barra vaya igual que el contenido

  • @ANDROMUNDO
    @ANDROMUNDO 4 года назад +1

    Comp puedo hacer para que el menu salga en primer ugar desplegdo en vez de oculto

  • @fershowfershow3164
    @fershowfershow3164 4 года назад

    una pregunta ya terminado la barra lateral puedo hacer la página porque a mi lo que me pasa es que la barra esta abajo de toda la pagina y no se como ponerlo exactamente donde yo lo quiero e tratado de cambiarlo pero no e podido

  • @oscarrkingsley
    @oscarrkingsley 5 лет назад +2

    Saludos! en el minuto ( 17:14 ) no me esta apareciendo el div, o sea, que la consola no esta reconociendola.
    Busqué en Brackets y me aparece esto [ [ expected an identifier and instead saw const ] ].

  • @JuanRamirez-vf6vb
    @JuanRamirez-vf6vb Год назад

    Muchas gracias, me fue de buena ayuda eres un grande!

  • @moisescorchoperez4860
    @moisescorchoperez4860 4 года назад +2

    Buenas, ojala alguien pueda resolverme una duda, y es que todo el asunto de javascript no me funciona en un proyecto de laravel, la parte de addEventListener no funciona para nada, alguien sabe porque? gracias de antemano

  • @asafsebastianorozcopaniagu5624
    @asafsebastianorozcopaniagu5624 2 года назад +2

    Muy buen tutorial, super bien explicado y facil de seguir :D

  • @ayrtonnahuel6042
    @ayrtonnahuel6042 3 года назад +1

    Sos un crack, me ayudaste muchisimo

    • @FaztCode
      @FaztCode  3 года назад

      Un gusto que te sirva Ayrton :)

  • @Thesmoker485
    @Thesmoker485 3 года назад

    y esto se adapta bien a móvil?

  • @fabriciocarranza7044
    @fabriciocarranza7044 4 года назад

    Excelente explicación. Aprendí mucho. Gracias 🙏

  • @leonardochirinoscautinho7187
    @leonardochirinoscautinho7187 5 лет назад +1

    Excelente tutorial, explicas muy muy bien. Te animo a continuar adelante! Exitos

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

    me puedes ayudar acabo de crear una pagina que ofrece a sus usuarios ofertas remuneradas lo que me falta es que todo los puntos que estos ganen enseguida se vean en su saldo arriba y cuando le den clic a dicho saldo los envié a un formulario de retiro que ya cree

  • @usuario1441
    @usuario1441 3 года назад +2

    por que me sale esto: Cannot read property 'addEventListener' of null
    at main.js:3
    (anonymous) @ main.js:3

  • @juanbarrionuevo3320
    @juanbarrionuevo3320 4 года назад

    Gracias perri, saludos desde ARG!

  • @canaliemeb
    @canaliemeb 4 года назад +1

    hola en la consola me aparece este error:
    Failed to load resource: net::ERR_FILE_NOT_FOUND
    como lo soluciono

  • @XDarkfull
    @XDarkfull 4 года назад

    Muchas Gracias bro, te deseo lo mejor!

  • @yohafuerzasespecialesgafe8143
    @yohafuerzasespecialesgafe8143 4 года назад +1

    muy buena plantilla, solo una duda amigo. como puedo ponerle un color de fondo diferente en la parte donde esta el logo

    • @coffeeboy7028
      @coffeeboy7028 4 года назад

      Guardalo dentro de un div y ponele background al div? Especificá mejor, no estoy seguro de a qué te referís

  • @josedavidquinterobernal5497
    @josedavidquinterobernal5497 3 года назад

    Muchas gracias pana por el aporte

  • @edgarmejia5356
    @edgarmejia5356 3 года назад

    hola bro, como estas?
    bro tengo una duda, como podria poner esa barra a la derecha?
    gracias igualmente

  • @jesusdavidpradovelarde995
    @jesusdavidpradovelarde995 3 года назад

    min 4:46 falto el punto y coma ( ; )

  • @alebinetti
    @alebinetti Год назад

    hola Amigo como veo e lcodigo de tus articulos

  • @javiergraphico
    @javiergraphico 2 года назад

    Excelente tutorial.

  • @alexito1612
    @alexito1612 4 года назад

    buen tutorial Fazt Code sois un maestro

  • @alexpineda1720
    @alexpineda1720 4 года назад

    un tutorial excelente con conceptos basicos

  • @sarynp8955
    @sarynp8955 3 года назад

    como puedo empujar odo el viwpot?

  • @bernatalegretfernandez3944
    @bernatalegretfernandez3944 3 года назад

    Gran Vídeo pero cada vez que entro a la página se me abre el slidebar. Como hago para q eso no ocurra y que cuando entre me aparezca escondida??

  • @josevilela6473
    @josevilela6473 6 лет назад +1

    Cannot read property 'addEventListener' of null - mi error x-x no lee el evento Listener. que podra ser -?

  • @AnibalSuarez
    @AnibalSuarez 6 лет назад

    Muy buen aporte amigo... gracias por compartir tu conocimiento... saludos desde Ecuador

  • @carlosmorales-bv8nr
    @carlosmorales-bv8nr 3 года назад

    Excelente video.

  • @jorgefelipegutierrezrosas2897
    @jorgefelipegutierrezrosas2897 Год назад

    Muchas gracias por el video.

  • @shauwder6829
    @shauwder6829 5 лет назад

    Oye en el minuto 17:17 no me muestra el div cuando busco en console

  • @hectormage
    @hectormage 4 года назад +1

    sigue asi mano, excelente cursos :D

  • @isabelnunez944
    @isabelnunez944 4 года назад

    He seguido todos los pasos y los documentos, pero sole me funciona la barra lateral al desplegarla, luego desaparece el icono y no me deja volver a meterla. Alguien sabe como solucionarlo o en que podría haberme equivocado??

  • @carlosgomez7002
    @carlosgomez7002 4 года назад +1

    Excelente Fazt. Pero tengo un problema cuando lo quiero incluir en las paginas del proyecto. Me aparece recortado el tamaño

    • @carlosgomez7002
      @carlosgomez7002 4 года назад

      ya lo averigue. muchas gracias todo es muy util

    • @andresneri5106
      @andresneri5106 4 года назад +1

      @@carlosgomez7002 me puedes decir como lo hiciste?

    • @carlosgomez7002
      @carlosgomez7002 4 года назад

      @@andresneri5106 Claro. No se si aca puedo poner enlaces a otros videos. Encontre dos maneras. Con HTML use y target para que no me lo abra en el mismo sector del menu. Y la otra solucion aparte, con PHP podes usar include. Todavia no se cual de las dos es mas conveniente. Te paso los enlaces:
      Con html: ruclips.net/video/5sEERPVy91w/видео.html
      Con php: ruclips.net/video/RBuhZR0uvwU/видео.html
      Por favor FAZT si podes aconsejarnos mas al respecto seria de mucha ayuda

    • @carlosgomez7002
      @carlosgomez7002 4 года назад

      ​ @Neri Lara Andres#23 Claro. No se si aca puedo poner enlaces a otros videos. Encontre dos maneras. Con HTML use y target para que no me lo abra en el mismo sector del menu. Y la otra solucion aparte, con PHP podes usar include. Todavia no se cual de las dos es mas conveniente. Te paso los enlaces:
      Con html: ruclips.net/video/5sEERPVy91w/видео.html
      Con php: ruclips.net/video/RBuhZR0uvwU/видео.html
      Por favor FAZT si podes aconsejarnos mas al respecto seria de mucha ayuda@@andresneri5106

  • @lavidamodernadesanti
    @lavidamodernadesanti 4 года назад

    Hermoso tutorial!!! Impecable gracias

  • @cesaraugustopachecoariza4528
    @cesaraugustopachecoariza4528 4 года назад

    Excelente video muchas gracias

  • @luissalinasarevalo468
    @luissalinasarevalo468 4 года назад

    como hago para ponerle un scroll ?

  • @josearteaga8839
    @josearteaga8839 4 года назад

    Como corres todo de una?
    A mi solo me corre el index por ser html
    Ayuda

  • @spiderloko7775
    @spiderloko7775 5 лет назад +1

    Oye, creo la mayoría SIEMPRE nos sentimos libres de poner el nombre que SE NOS ANTOJE a nuestras carpetas y archivos, y de usar el editor de código que queremos. No hace falta que sigas diciendo eso. Buen tutorial btw.

  • @putobatis2017
    @putobatis2017 4 года назад

    como puedo hacer para que salga de la izquierda?

  • @juliocesarhernandez5492
    @juliocesarhernandez5492 4 года назад

    Buen video, diculpen, como puedo hacer para que el menu salga del lado derecho de la pantalla (desde la perspectiva que el usuario mira la pantalla) o a la izquierda (desde la perspectiva de la pantalla misma) Gracias

    • @bohemiogenio
      @bohemiogenio 2 года назад

      Yo me pregunto lo mismo y me parece increíble que en 2 años nadie te haya respondido.

  • @ozit0
    @ozit0 4 года назад

    buen video, me suscribo

  • @sergiosaiz1486
    @sergiosaiz1486 2 месяца назад

    Dios que buen vídeo

  • @yairrodriguez475
    @yairrodriguez475 6 лет назад

    esto lo puedo integrar a un sitio web de ecommerce? (de 0, nada de magento prestashop shopify)

    • @FaztCode
      @FaztCode  6 лет назад

      Si por supuesto, no veo porque no :)

    • @yairrodriguez475
      @yairrodriguez475 6 лет назад

      deberias hacer un curso de laravel en udemy , sabes mucho , saludos

  • @luisramirez-xg1ls
    @luisramirez-xg1ls Год назад

    oye creo que tu viste un error porque el div se cierra con

  • @yuryapaza3077
    @yuryapaza3077 6 лет назад +1

    Ya me salio solo una pregunta porque ponemos [ #sidebar.active ] en lugar de solo [ .active ]
    aunque eso fue el error que cometí

    • @orlmonteverde
      @orlmonteverde 6 лет назад +1

      En este caso funcionaría igual, pero aplicaría a cualquier elemento con la clase "active" y eso puede no ser lo que quieres.

  • @Reysaturn723
    @Reysaturn723 5 лет назад

    Quiero que el contenido de la pagina se mueva y el sidebar no. Y que cuando los items del sidebar superen el alto de la pantalla le salga un scroll. Como haría eso? Saludos!

  • @mabi9556
    @mabi9556 4 года назад

    Hola no me reconoce el const y ahí me quedo trabada!! ayuda por favor!!

  • @obba5327
    @obba5327 2 года назад

    gracias crack

  • @jeanpaulubaldo313
    @jeanpaulubaldo313 5 лет назад

    y como hago para ponerlo dentro de mi proyecto html?

  • @edwinleonardo9340
    @edwinleonardo9340 6 лет назад +1

    hola gracias por el proyecto

  • @BlueMoises96
    @BlueMoises96 5 лет назад

    Gracias, excelente tutorial

  • @edicsonlopez2936
    @edicsonlopez2936 5 лет назад

    hola amigo... como puedo poner una imagen o información al final de la barra.. ? saludos desde Venezuela :D buen video...

  • @juancamilogilrestrepo
    @juancamilogilrestrepo 5 лет назад

    Cómo se hace con Bootstrap??

  • @luisdavidmateo1565
    @luisdavidmateo1565 4 года назад

    no me funciona, la consola me dice que no se ha encontrado la clase O_O

  • @arhsilva
    @arhsilva 5 лет назад

    Genial..!!! Muchas gracias

  • @DiegoGonzalez-zf6fz
    @DiegoGonzalez-zf6fz 4 года назад

    Gracias totales

  • @yuryapaza3077
    @yuryapaza3077 6 лет назад +1

    buen video Fazt aprendi mucho solo que no me sale en la parte [ classList.toggle('active')]

  • @holmancun
    @holmancun 6 лет назад +1

    Muchas gracias !!!

  • @ertroytechnologies2182
    @ertroytechnologies2182 2 года назад

    seria lo mejor si fuera responsive, asi sirve pero queda a medias .

  • @loanyelo15
    @loanyelo15 4 года назад

    el problema es hacerlo funcionar con 2 botones diferentes

  • @spiderloko7775
    @spiderloko7775 5 лет назад +1

    6:08 YA LO SEEEE M***CON! YA LO SE! Ya se que puedo utilizar el logo que yo quieraaaa!

  •  4 года назад

    Gracias

  • @neomartscp5944
    @neomartscp5944 6 лет назад

    Responsive?

  • @josetorres-jr9lz
    @josetorres-jr9lz 3 года назад

    y yo partiendome el cerebro en 2 por no conocer .active y querySelector :C ni classList ni Toggle

  • @cmodead5284
    @cmodead5284 4 года назад

    Es raro que sea capaz de programar decentemente en javascript y no sea capaz con css literal me jode xd sobretodo el hecho del responsive