Neste artigo você vai aprender a como fixar um menu horizontal no topo da janela ao rolar a página, de modo simples e apenas com CSS
Conteúdo também disponível em vídeo:
Fala programador(a), beleza? Bora aprender mais sobre menus, CSS e também posições de elementos!
Para começo do conversa é importante citar que não precisamos de JavaScript para fixar um menu, podemos fazer tudo com CSS simples
Porém há meios de fazer isso com JavaScript, o que eu não indico, apenas em situações que seja necessário
E como fixar o menu com CSS?
Vamos primeiramente adicionar a position de fixed, que fixa um elemento em alguma parte da tela
Depois podemos garantir que o mesmo fique no topo e alinhado para esquerda com as regras: top e left, com o valor de 0
E geralmente estes menus tem largura da tela toda, então podemos adicionar uma regra de width com 100%, e então nosso menu estará fixo e tudo estará posicionado corretamente
Veja o código completo:
<div id="menu"></div>
Aqui criamos o nosso HTML do menu, vou criar apenas uma estrutura mais simples possível para inserir o menu, ou seja, uma div
Agora veja o CSS:
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
background-color: green;
}Aqui também adicionei altura (height) e uma cor de fundo, para caso você copie o meu exemplo ele tome uma forma completa
Sendo assim, vai parecer um menu horizontal, é claro que sem os itens internos que você vai adicionar no seu
Viu como é simples fixar um menu? 🙂
Conclusão
Neste artigo aprendemos a como fixar um menu horizontal no topo da janela
Utilizamos apenas regras de CSS, como a position fixed, que a que faz toda a mágica
Fixando um elemento em alguma posição da tela, que definimos com top e left
Vimos também que a ação pode ser feita com JavaScript, mas não é indicado
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube