Como fazer um MENU LATERAL responsivo (SIDEBAR) | HTML, CSS e JavaScript

Поділитися
Вставка
  • Опубліковано 4 лют 2024
  • Olá, pessoal!
    Nesse vídeo, vou mostrar para você como fazer um menu lateral responsivo utilizando HTML, CSS e JavaScript. Vou te mostrar diversas funcionalidades do CSS, como FLEXBOX e GRID, além de demonstrar técnicas para posicionar elementos usando "position".
    Repositório com o código:
    github.com/Larissakich/sidebar
    Redes sociais:
    LinkedIn: / larissakich
    Instagram: @dev_em_dev
    E-mail:
    larissakich04@gmail.com
    Tema do VSCode:
    Omni Owl
  • Наука та технологія

КОМЕНТАРІ • 32

  • @robsonfernandes2692
    @robsonfernandes2692 4 місяці тому +2

    Que aula. Vc é perfeita. Umas das melhores didáticas do UA-cam. Parabéns.

  • @EngenhariaBomRetiro
    @EngenhariaBomRetiro 2 місяці тому +1

    Para alinhar a parte de Logout eu consegui fazer isso no final, com essas configurações deu certo, centralizou o icone com a sidebar aberta e fechada



    Logout

  • @pedroeuzebiooo
    @pedroeuzebiooo 4 місяці тому

    Fantástico D+++ Larissa!!! Conteúdo de qualidade e objetivo e desenvolvendo apenas com HTML, CSS e JS puro, mandou bem ❤️

  • @febatera07
    @febatera07 4 місяці тому +1

    Cara, sensacional... Eu uso esse recurso nativo do Bootstrap mas nunca tinha parado pra fazer na unha e, o teu, ficou muito filé. Parabéns, teu canal e teus vídeos são muito bons 😊

  • @rogermattes5397
    @rogermattes5397 19 днів тому

    Me Ajudou muito esse layout, ficou perfeito para um projeto que estou fazendo aqui... Obrigado por compartilhar

  • @vitorhugo-zary
    @vitorhugo-zary 3 місяці тому

    Amém. Que vídeo lindo obrigado por sua ajuda 😀, muitissimo grato. Que Deus te abençoe, te guarde e te ilumine.

  • @mchaprao
    @mchaprao 2 місяці тому

    Parabéns pela aula!

  • @DavidSilva01
    @DavidSilva01 Місяць тому

    Muito top, parabéns 👏🏻👏🏻

  • @ratodorime2761
    @ratodorime2761 4 місяці тому

    Muito obrigada professora 🎉, aprendi muito em suas aulas. Muito sucesso 🎉

  • @robsonfernandes2692
    @robsonfernandes2692 4 місяці тому

    Vc ganhou mais um inscrito. ❤

  • @antonioalexandre9563
    @antonioalexandre9563 20 днів тому

    muito boa sua aula parabens

  •  Місяць тому +1

    Larissa, Boa Noite. Parabéns pela aula. Eu estou iniciando agora pergunto Como faço uma ação ao clickar neste icones laterais, exemplo eu mostrar neste lado direito um CRUD e dados do usuário do firebase

  • @wocwoc
    @wocwoc 3 місяці тому +1

    tem como vc da aula de como colocar scripts de segurança no site antes de subir ele no servidor?
    ótima aula.
    queria entender como montar uma página onde quando logo , aparece o usuario logado como vc fez e ter todas informações do usuario , tipos coisas favoritas , e quando ele sair , fica limitado aos acessos de um usuario , como informações exclusivas .
    acredito que seja em javaScript..

  • @misternet1121
    @misternet1121 Місяць тому

    Ficou show de bola... Muito obrigado por nos ensinar a fazer isso.
    Uma pergunta: Como faço para criar sub-menus nele?

  • @digosSongs
    @digosSongs 4 місяці тому

    Top!

  • @fabioyugo
    @fabioyugo 4 місяці тому

    Ficou massa a sidebar, gostei de como ficou a animação de abrir e fechar. Ali no botão de logout, se usar um visibility no span do texto será q resolve ?

  • @investindoemativos8690
    @investindoemativos8690 4 місяці тому +1

    Um dia chegarei no seu nível! Muito top!

    • @larissakich
      @larissakich  4 місяці тому

      Muito obrigada haha ☺️

  • @LuanRBarros
    @LuanRBarros День тому

    e como faz sub menu ?Tipo, clicando em uma opção aparece outra em baixo

  • @jccarlos2025
    @jccarlos2025 2 дні тому

    Minha flor de lotus voce ensina muito bem, ficou ótimo seu trabalho, porem fala muito rápido, e ensina muito rápido!! lembre-se existe pessoas que tem dificuldade para pega as coisa. God bless you

  • @EngenhariaBomRetiro
    @EngenhariaBomRetiro 2 місяці тому

    Para alinhar o icone de logout pelo css tambem não consegui, mas alterando o Style dele diretamente no html deu certo para mim dessa forma. Ficou alinhado o Siderbar aberto e fechado.
    Se achar a forma pelo css me responda pfv.




    SAIR

  • @barejota6678
    @barejota6678 2 місяці тому

    Larissa e como ficaria o codigo para que pudesse mudar o elemento que esta selecionado com o mouse clicando, sem ser colocando aquele "active" na class

  • @AlexSoaresGtr
    @AlexSoaresGtr 4 місяці тому

    Oi Lari!! Tudo bom?
    Qual plataforma você usa ou usou para aprender a programar?

    • @larissakich
      @larissakich  4 місяці тому

      Oii, tudo bem e você? Fiz alguns cursos da Alura e alguns da b7web, recomendo os dois, são muito bons

  • @WellingtonCoutto
    @WellingtonCoutto 4 місяці тому

    Não consigo acessar essa versão do GoogleFonts. Quando pesquiso só me direciona para uma nova versão.

    • @larissakich
      @larissakich  4 місяці тому

      Que estranhooo, tenta acessa esse link aqui: fonts.google.com/

  • @dellconte
    @dellconte 2 місяці тому +4

    Gostei, mais algumas coisas vc faz rápido e quem esta aprendendo e complicado acompanhar... E quem sabe não precisa ver... pensa nisso!

  • @jccarlos2025
    @jccarlos2025 2 дні тому

    Esta parecendo narradora de jogo os torcedor so entende goooolll!! va mais de vaga, ensine com mais calma, ensinar e uma arte!! essa arte voce tem; todavia esta muito acelerada.

  • @AndreOliveira-rn5dx
    @AndreOliveira-rn5dx 4 місяці тому +2

    Top!!! Queria ver se consegue remodelar meu site? Te mandei um inbox no seu Instagram