Como Fazer um Menu Navbar Responsivo Animado - Tutorial HTML, CSS e JavaScript para Iniciantes
Вставка
- Опубліковано 27 чер 2024
- Nesse vídeo eu vou te mostrar como criar do zero um menu navbar, ou barra de navegação, responsivo e animado com uma transição em efeito de bolha. Usaremos HTML, CSS e JavaScript apenas, sem plugins, sem frameworks.
#html #css #javascript
🔗 Recursos
Código da aula github.com/tigercodes-io/navb...
📚 Capítulos
00:00 O Menu
00:32 Setup
00:47 HTML
01:21 CSS
06:29 JavaScript
07:07 Ajustes finais
🐅 Seja um assinante Tiger Codes
Aprenda front end do zero em tigercodes.com.br/
Use o código UA-cam para 15% off no seu primeiro pagamento.
🌐 Redes Sociais
TikTok / tigercodes
Instagram / tiger_codes
Twitter / tiger_codes
Nossa , muito top , o Mais incrível eh que você fala cada função e oque ela faz , isso pra nós que somos iniciantes eh fundamental parabéns
Cara eu faço curso técnico, e sem duvida, as suas explicações são bem sucintas diretas ao ponto, se fosse em aulas do técnico, isso q vc apresentou em menos de 10 min, seriam 2 ou 3 aulas de 5:30hrs, devido a turma ter metade só atrapalhando, parabéns ótimo trabalho, vou add aos meus projetos, assim como já fiz em outras video aulas suas.
Mano, simplesmente sensacional! Didático, explicativo, e o melhor, resultado excelente. Muito obrigado! Você é fera demais, cara!
Um dos poucos que explica propriedade por propriedade! Bom demais
Montando meu site aos poucos! Essa aula foi sensacional✌
Maravilha de detalhes, conteudo simples de entender comentários sobre o que usar. Aula Top.
Seu conteúdo é excelente.
A edição é perfeita também, assisti alguns vídeos mais antigos seus. Você é muito bom!
Show, obrigado por compartilhar.
Deixarei meu like. Boa explicação, sem enrolações e foi bem oque eu queria
Obrigado Guerreiro 💟
Estou a alguns dias aprendendo HTML/CSS/JS e seus videos tem me ajudado muito. Suas explicações de cada propriedade são muito úteis, parabéns pelo conteúdo.
A ideia de usar o clip-path pra isso foi sensacional! Sugiro você gravar um vídeo sobre dasharray também.
Esse canal é muito brabo.
Você foi incrível! Essa aula foi ótima, eu estava lutando para aprender a fazer um menu responsivo há um tempo, mas finalmente consegui com o seu vídeo, obrigado mano!
Parabéns pelo material. Muito mais fácil de implementar dessa forma.
mano que canal top, inscrito agora mesmo
Valeu pela dica, já tinha feito uma Navbar pelo Bootstrap, to fazendo pelo CSS só pra diferenciar um pouco e aprender coisas novas
toptop +1 inscrito
Muito bom.
Valeu tmj
To aprendendo html/css e esse conteúdo me ajudou muito, vlw
Bons estudos e conte comigo na sua jornada!
Parabéns ótimo vídeo mano
Muito obrigado ✌
Seus vídeos ajudam demais, estou com uma duvida na hr de colocar um h1 e um botão por cima dessa imagem, como seria a estrutura do codigo para deixar os mesmos responsivos?
Amei o conteúdo se seu curso tivesse um desconto certeza assinava, 300 é meio salgado pro meu bolso
Opa leo, tudo bom? Temos um cupom de desconto para ficar com um preço mais bacana, basta usar o cupom UA-cam no ato da compra 🐅
Parabéns pelo vídeo! Cara, como mantenho o menu visível em tela cheia?
Não tenho foco em frontend mas gostei muito do canal mano, parabéns
Obrigado mesmo
Kcete irmao comecei no mundo da programação hoje com HTML e CSS e estou com medo veio kkk insano de difícil.
Por incrível que parece meu URL na parte do hero que é para colocar a cor de fundo não funcionou
O ponteiro do mouse não aparece nos itens ao expandir a navbar e perdeu a funcionalidade de links. Como resolver isso?
Quando clico em algum item do menu, o menu não desaparece
estou tentanto implementar a parte do hamburger, mas quando chega menor do 750px, até aparece o botão mas n abre e n faz a animação, creio que eu esteja errando em alguma nomenclatura, alguém poderia me chamar pra me ajudar ?
quado clica no link do menu o menu não some
..e com faz para fechar o menu ao clicar nos links? : /
Primeiramente, muito obrigado pelo seus conteúdos, são ótimos. Gostaria de saber, se possível, como deixar padrão o lang="pt-br", no meu VSCode, quando uso o atalho ! + Tab ele sempre vem com lang="en".
Vou fazer um vídeo
Gostei muito do vídeo. Bem explicativo.
Quando está no modo celular, ele já aparece o menu aberto. Como faço pra ele estar com o menu pra pessoa clicar e abrir?
E quando o menu está aberto e eu clico no X ele não fecha o menu estendido. Como resolver?
Se o menu aparece aberto significa que em algum lugar do seu código ele já começa com a classe active, seja no HTML ou no próprio JavaScript na execução do mesmo
cara ali onde vai a logo eu coloquei uma imagem estou usando a função só que nessa função não consigo puxar o css .logo, poderia me ajudar ?
adiciona uma classe ou id, ai ficaria
vídeo muito bom! Estou começando a programar por agorar e queria saber como você fez para deixar o site atualizando em tempo real ao lado!
tbm queria saber
No VS Code você instala uma extensão chamada Live HTML Preview. Então vai apertar F1 + Enter para ligar a visualização.
A atualização é sincronizada com o documento, ou seja, se vc faz alterações e vai apertando ALT + S (salvar) ela vai atualizar.
É uma ferramenta muito útil, costumo usar bastante.
@@pablonotpicasso7520 obrigado amigo, isso vai me ajudar muito🤝
O meu código não funcionou, alguém pode me ajudar?
Não esta mais funcionando...
como botar essa onça ai
🐅🐅🐅🐅🐅🐅🐅🐅
Fazes as coisas muito rápido assim é difícil de ti acompanhar
Maninho tem como me ensinar atualizar os codigos do meu painel? Pfv😢 me manda o discord
Mano, simplesmente sensacional! Didático, explicativo, e o melhor, resultado excelente. Muito obrigado! Você é fera demais, cara!