Criar um menu Dropdown com HTML e CSS

Поділитися
Вставка
  • Опубліковано 28 вер 2024
  • ★★★★★
    Tutorial de como criar um Menu Dropdown (menu que aparece ao passar o mouse na barra de navegação) utilizando apenas html e css.
    Indicadoo para iniciantes em desenvolvimento Web
    Código no github:
    github.com/vic...
    ★★★★★
    Oferecimento, Gemeltec Soluções em Tecnologia
    gemeltec.com.br
    ★★★★★
    SIGAM NO INSTAGRAM: / gemeltec
    ★★★★★
    CURTAM NO FACE: / gemeltec

КОМЕНТАРІ • 87

  • @FilipeMonteiro-c1g
    @FilipeMonteiro-c1g 2 місяці тому

    Explicação excelente pra quem está começando e está praticando. Obrigado pela ajuda

  • @guilherme-rsm
    @guilherme-rsm Рік тому +2

    Ganhou mais um inscrito pois eu pude compreender facilmente devido a sua excelente didática. Desde já, muito obrigado por compartilhar seu conhecimento de forma tão simples e objetiva.

    • @Gemeltec
      @Gemeltec  Рік тому +1

      Obrigado pelas palavras amigo, fico feliz que tenha ajudado!!

  • @Didigos_
    @Didigos_ 8 місяців тому +1

    venho de uma plataforma PAGA que depois de quase 30h de aula sobre css, html e javascript não me ensinaram o que vc em 12 minutos conseguiu me explicar, parabéns!

    • @Gemeltec
      @Gemeltec  8 місяців тому

      Fico feliz em ter ajudado!!

  • @nandocrowler
    @nandocrowler 11 днів тому

    Brother, muito bom, boa explicação simples e fácil e entender. Obrigado e parabéns pelo canal

  • @William.Ribela
    @William.Ribela 6 місяців тому

    Simples, direto e reto. Parabéns pelo tutorial.

  • @luiz_luzs
    @luiz_luzs Рік тому +11

    aprendi mais aqui do que em vários lugar, parabéns

  • @kingpenha
    @kingpenha 8 місяців тому

    Por que não poderia ser no o hover em vez do ? Sendo que passamos por cima do a e do li

    • @Gemeltec
      @Gemeltec  8 місяців тому +1

      Olá, obrigado pela pergunta!
      Ele até poderia ser na tag , mas nesse caso como dentro dela está apenas o texto, o menu só apareceria ao passar o cursor do mouse em cima do texto e não no retângulo inteiro que o envolve

    • @kingpenha
      @kingpenha 8 місяців тому

      @@Gemeltec mas não funcionou não. Obrigado pelo retorno mestre

  • @melinornosferattu4542
    @melinornosferattu4542 Рік тому +1

    n para n manin, tem futuro. explica mt bem

  • @marianaramos1718
    @marianaramos1718 Рік тому

    Perfeito, assisti muitos vídeos, mas só consegui através deste. Obrigada!

  • @shadow-kyagiri5829
    @shadow-kyagiri5829 Рік тому +1

    salvou meu trabalho final, obrigado

  • @LeticiaMeloDias
    @LeticiaMeloDias 5 місяців тому

    Estava com dificuldade e seu vídeo ajudou bastante. 👏👏

  • @silviocyrus
    @silviocyrus 3 місяці тому

    C é loko que didática top Parabéns man.

  • @umpNoob_0
    @umpNoob_0 10 місяців тому

    Seu conteúdo é muito bom! Bem explicado. 👏

    • @Gemeltec
      @Gemeltec  10 місяців тому

      Fico feliz que gostou!! 😁

  • @mayaraflorencio9855
    @mayaraflorencio9855 5 місяців тому

    rápido, objetivo, muito completo! parabéns, ajudou muito (;

  • @EDILSONSILVA-kh8fj
    @EDILSONSILVA-kh8fj 4 місяці тому +1

    Bom dia, aprendi fazer esse menu, mas agora queria saber se vocês tem video sobre fazer o link desse vídeo.

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

      Olá amigo, desculpe não entendi... sobre qual assunto você gostaria de um video?

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

    Ao passar o mouse por cima dos demais ítens, como: Sobre e Contato, o menú não recolhe, ou seja, se adicionar mais um dropdown-menu em algum outro ítem, vai mostrar todos os dropdowns-menus. Não sei se foi só comigo quando tentei. Mas pra mim foi uma técnica não tão interessante. "Poder por um menú em apenas um ítem".
    Também não sei se é pq precisa de J.S para fazer essa manipulação. 🙄

  • @thiagocavaliere7251
    @thiagocavaliere7251 7 місяців тому

    show de bola irmão , me salvou muito s2

  • @PU4APB
    @PU4APB 6 місяців тому

    Obrigado meu caro, ajudou muito.

  • @moshiky1494
    @moshiky1494 7 місяців тому

    Ótimo vídeo, meu irmão

  • @inglescomtulio5429
    @inglescomtulio5429 5 місяців тому

    Video top!!
    sucesso!!!

  • @dark.6985
    @dark.6985 10 місяців тому

    o meu scroll down desaparece pq embaixo tem um carrousell de imagens, oq faço?

    • @Gemeltec
      @Gemeltec  10 місяців тому

      Ele fica atrás do carrossel? Se sim, tente alterar a propriedade z-index dele para mais alto, ex: z-index: 999

    • @dark.6985
      @dark.6985 10 місяців тому

      @@Gemeltec pera aí, farei algumas alterações e já retorno com a resposta.

    • @dark.6985
      @dark.6985 10 місяців тому

      @@Gemeltecele não está por trás, porque todo drop-down aparece, mas quando eu coloco o cursor na coluna que está mais próximo do carrossel, o drop-down desaparece.

    • @Gemeltec
      @Gemeltec  10 місяців тому

      Se conseguir me enviar um link para o seu código eu vejo se consigo te dar uma ajuda

    • @dark.6985
      @dark.6985 10 місяців тому

      @@Gemelteccomo posso enviar um link?

  • @renatoconi3042
    @renatoconi3042 Рік тому

    voce fala bem, uma sugestão de oratoria é remover o vicio de liguagem "ta bom" parece que esta pedindo aprovação e isso reduz seu valor, e obrigado pelo video.

    • @Gemeltec
      @Gemeltec  Рік тому

      Agradeço pela crítica construtiva amigo e fico feliz pelo vídeo ter ajudado!!

  • @severinocabral6615
    @severinocabral6615 3 місяці тому

    GALERA QUEM PUDER ME AJUDAR,COMO ME ENSINAR A COLOCAR NO SITE

  • @Hollodun
    @Hollodun 7 місяців тому

    Aqui não deu certo... alguém poderia me ajudar?

    • @Gemeltec
      @Gemeltec  7 місяців тому

      Como apareceu pra você?

  • @AdãoBidiSanzulaAdão
    @AdãoBidiSanzulaAdão Рік тому

    Tenho uma dúvida

    • @Gemeltec
      @Gemeltec  Рік тому

      Qual sua dúvida amigo

  • @GeorgeNascimento08
    @GeorgeNascimento08 5 місяців тому

    eu esqueci foi com o clikc...

  • @MarcioSilva-jt7gt
    @MarcioSilva-jt7gt 9 місяців тому +4

    Um ano depois que postou seu video, estou eu aqui aprendendo a fazer o menu através do seu conteudo Victor, vc explica de forma paulatina, e nao acelera a explicação do conteúdo como muitos outros por ai, desta forma fica fácil entender o conceito por etapa. Parabens meu garoto.

    • @Gemeltec
      @Gemeltec  9 місяців тому

      Olá, obrigado!! Fico muito feliz pelo seu comentário e por meu conteúdo ter contribuído de alguma forma!!

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

    Ótimo video.
    Você poderia crisr um de como exibir um ponteiro de mouse diferente quando esti er acessando a página?

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

    Excelente aula mano, vlw!!!
    Qual seria o jeito mais recomendado?
    Usando JS pra adicionar classe ao botão ou fazer tudo em css?

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

      @@aprendizdefunileiro9281 muito obrigado!
      Depende da forma que for fazer, se for só esse simples pode ser direto com css que é mais prático, mas caso for fazer alguma interação extra com o seu menu aí o JS pode te proporcionar mais praticidade

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

    Uma dica galera, para o link serviços funcionar em um dislplay mobile você precisa colocar # no link de ''serviços'' em href =''#''
    Serviços


    Serviços 2
    Serviços 3
    Serviços 4
    Serviços 5

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

      @@aprendizdefunileiro9281 Show!!!!

  • @ogneto9663
    @ogneto9663 5 місяців тому +1

    absurdo! mlk é monstro na explicação

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

    top bom professor

  • @c0quinh4_gelada36
    @c0quinh4_gelada36 Рік тому +1

    cara fiz do teu jeito porem n funciona ;-;

  • @TheGamesLs
    @TheGamesLs 11 місяців тому +1

    Excelente aula, muito obrigado!!

  • @arlesiodosanto1138
    @arlesiodosanto1138 9 місяців тому

    Valeuuuuuuuuuu de++++++❤❤❤

  • @kayoKALS
    @kayoKALS 3 місяці тому

    vlwwwwwwwwww

  • @ummerodev007
    @ummerodev007 5 місяців тому

    valeu mano

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

    Simples, direto e reto, sem enrolação. Parabéns pela explicação!😃

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

      Obrigado amigo, fico feliz que gostou!

  • @pjunior6865
    @pjunior6865 9 місяців тому

    Top

  • @waldirsoares6999
    @waldirsoares6999 Рік тому +1

    Como faço para pegar proj no git hub

  • @raphaelamoraes2008
    @raphaelamoraes2008 Рік тому +1

    Os seus vídeos me ajudam muito 👏🏻

  • @skaralysk
    @skaralysk 5 місяців тому

    é possível colocar um scroll somente no menu dropdown?
    caso tenha muitas categorias e não apareça o restante em resoluções menores.

    • @Gemeltec
      @Gemeltec  5 місяців тому

      É possível sim, você pode por exemplo definir uma altura maxima para o seu dropdown, caso a quantidade de itens ultrapasse o tamanho que você definiu você utiliza o overflow-y: scroll para que ele adicione uma barra de rolagem.
      Neste video ensino aa como personalizar uma barra de rolagem pode ser que te ajude:
      ua-cam.com/video/uHQnt7K2zZo/v-deo.html&t

  • @wagnersantos-uu2xp
    @wagnersantos-uu2xp 4 місяці тому

    obrigado moço voce salvou minha vida

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

      Fico feliz que ajudou!!

  • @eltonmatsinhe-e8x
    @eltonmatsinhe-e8x Рік тому

    Peco ajuda com um codigo html e css que estou gerando mas estou tendo dificuldades em criar um menu suspenso com 4 niveis

  • @EsperançaMpova
    @EsperançaMpova 6 місяців тому

    ajudou me bastante,e aprendi .
    obrigado

  • @zankyoou
    @zankyoou 11 місяців тому

    quando eu vou mudar a cor da fonte no css não funciona, vc sabe oq pode ser?

  • @henriqueborges3441
    @henriqueborges3441 7 місяців тому

    Bem prático show parabéns...

  • @gabrielfelipe152
    @gabrielfelipe152 Рік тому

    Irmão vc é braboo

  • @MatheusDevArt
    @MatheusDevArt Рік тому

    Valeu amigo, você é um amigo

  • @maviyoki2965
    @maviyoki2965 Рік тому

    rodei a net toda e só encontrei a resposta aqui, parabéns pelo empenho e pelo canal ❤❤

  • @waldirsoares6999
    @waldirsoares6999 Рік тому

    Parabens otima explicação

  • @ShibuyaShibuya-jv2tu
    @ShibuyaShibuya-jv2tu Рік тому

    bingo

  • @andersonluiz8531
    @andersonluiz8531 Рік тому

    Muito show esse video.

  • @gustavocaldonho9390
    @gustavocaldonho9390 Рік тому

    Show demais!

  • @nomadealex
    @nomadealex Рік тому

    Muito bom!

  • @marcioardanuy3089
    @marcioardanuy3089 Рік тому

    Excelente, professor!!

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

    curtida numero 1000, muito bom e direto ao ponto a aula,sucesso

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

      @@guilhermeboas5518 muito obrigado amigo!!

  • @paulofernando78
    @paulofernando78 Рік тому

    Muito bom. Mas não seria funcional pelo celular, certo?

    • @Gemeltec
      @Gemeltec  Рік тому

      Olá, é funcional em dispositivos móveis também, mas dependendo da estrutura do seu site você pode usar assim simplificado ou usar um menu responsivo e adequar ao seu site/app

    • @gabrielfelipe152
      @gabrielfelipe152 Рік тому

      Funciona normal, porém ele vai ficar "quebrado ". Entt teria mudar os pixels por celular. Se não me engano no mínimo da Tela mobile é 600 pixel.

  • @WezleyDommyOfficial
    @WezleyDommyOfficial 11 місяців тому +2

    Ta sem qualidade