CSS HTML

Como fixar um menu horizontal no topo da janela ao rolar a página

27 de janeiro de 2021

Como fixar um menu horizontal no topo da janela ao rolar a página

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

fixar um menu horizontal no topo da janela capa

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: fidex;
  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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x