Como fazer um MENU SCROLL com CSS
Вставка
- Опубліковано 28 кві 2022
- ✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/programmakerspro
Você sabia que é totalmente possível criar um menu scroll utilizando apenas CSS? Nesse vídeo eu te ensino uma tática muito simples para deixar seu site ainda mais estiloso de um maneira extremamente fácil.
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 rbruno216@gmail.com
✅ CASO SEJA DO SEU INTERESSE:
🔹 Veja alguns outros vídeo nesse mesmo estilo:
▸Efeito deslizante ANTES e DEPOIS: • Como criar ANIMAÇÃO DE...
▸Como criar um MENU PERSONALIZADO: • Como criar um MENU PER...
▸Como criar o efeito VIDRO (glassmorphism): • Como criar o EFEITO VI...
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
Top, já deixei o like
Muito bom amigão!
Excelente. Mais uma inscrição!
Cara a sua didática é incrível! Espero que o seu canal cresça e ajude mais pessoas como eu
Aaah mano, muito obrigado! ❤️ Que bom q consegui te ajudar
Massa! Me ajudou muito...grato pelas dicas e parabéns pela didática. Sucesso!
Cara, revirei a internet atrás de vídeos que dessem um norte sobre essa funcionalidade, jurava que seria só utilizando eventos do JS e uma complicação só.
Muito obrigado mesmo, eu estava há dias buscando essa informação. Todo sucesso a você!
Irmão, fico feliz em ter te ajudado! Muito obrigado! 👊🏾❤️
Seus vídeos são sensacionais cara. Continua pelo amor de Deus kk didática fantástica.
Kkkkkkk muito obrigado mano, breve estou de volta
Bom dia a todos! Mestre Bruno Rodrigues, essa questão de menu fixo, para que cada section role certinho, parando o section na posição correta, temos que configurar o padding de cada section, até ai tudo bem... problema que, se o usuário usar a barra de rolagem do navegador, ou seja, sem clicar no menu, esses espaçamentos serão visiveis e infelizmente não ficam legal nessa visualização "manual". Tem como criar alguma "regra" no css ou javascript para que isso seja corrigido?
Ótimo vídeo, gostaria de aprender como faz Diminuir o Menu fixo ao Scroll, você poderia fazer um vídeo ensinando?
Fala mano, blz? Já estou elaborando esse vídeo que vc sugeriu. Fica de olho q em breve eu posto aqui no canal 😁
@@InteliogiaDev Show, ficarei de olho sim!
ensina a criar as sessões
fiz tudo conforme ensinou e o comando
html {
scroll-behavior: smooth;
}
não está funcionando, já olhei tudo e revi tudo e nada, inclusive o comando scroll-behavior: smooth dentro do meu style.css ele não identifica como uma comando valido.
pode me ajudar?
também aconteceu a mesma coisa comigo agora, to tentando solucionar
Gosteis bastante da didatica, porem estou com uma dúvida, como faço para deixar o menu fixo assim?
Criei um menu utilizando o bootstrap, porem ele não acompanha a pagina quando desco pra baixo
Fala, Vini! Cara com o bootstrap tem que ver na documentação. Mas assim com o HTML e CSS vanilla basta selecionar o elemento do menu completo, e aplicar as transformações a seguir:
#menu{
position: fixed
top: 0;
left: 0;
}
👊🏾😁
Não consigo deixar todos os inícios certos com o menu após clicar para fazer a rolagem, o que faço?
Aumente o padding das sessões de modo que se adapte ao seu menu. Outra opção também é vc usar o position: sticky, com top: 0 e left: 0. Assim ele ficará grudado no topo e o CSS fará a adaptação para vc 🙂
sempre que eu clico em um link a pagina só desce menos da metade até chegar na seção que eu quero, qual será o problema?
Suas sessões podem estar com muita margem ou pouco padding mano, nesse caso tenta identificar para manter o equilíbrio entre ambos 😁
O meu nao rolou suave oq posso fazer
Recomendo rever se o código está exatamente igual. Provavelmente você deve ter errado em alguma etapa 🙂