Como criar uma barra de menu de redimensionamento

Ultimamente alguns sites, como Esta é a Brigada e Todos vocÊs começou a apresentar um menu dinâmico e animado que é redimensionado na rolagem para baixo. Minimizando a navegação principal para permitir mais espaço para o conteúdo. Neste tutorial, explicarei como você pode criar este menu com HTML5, CSS3 e apenas um pouco de jQuery.

Esse tipo de menu é ótimo se você quiser dar especial atenção ao seu conteúdo em todo o site, além de permitir que você crie uma navegação maior e mais impactante na primeira visita de um usuário a um website. Você pode exibir melhor a marca ou o logotipo de seu website, ótimo para a visualização acima da dobra; e depois de envolver o usuário em uma visita, uma versão menor e minimizada se esconde sutilmente para permitir que o usuário se concentre principalmente em seu conteúdo.

Existem várias maneiras de fazer isso. Neste tutorial, explicarei como criar uma barra de menu fixa com largura total, que seja redimensionada em altura junto com o logotipo, criando uma versão minimizada simples da inicial. Se preferir, também pode substituir a imagem do logotipo por outra variação do seu logotipo, como iniciais ou um ícone, mas tenha em mente que a consistência é realmente importante aqui, para que o usuário entenda como o elemento foi alterado e que seu objetivo principal ainda é o original; navegando no site.

Antes de começarmos, você pode confira a demonstração ou baixe a fonte daqui .

Criando a estrutura básica em HTML

Começaremos criando o código HTML básico que precisaremos. Vamos nos ater a uma estrutura HTML5 realmente simples para o ponto de partida.

Agora que nosso código HTML inicial está pronto, adicionaremos o código para o menu, bem como alguns outros detalhes no cabeçalho do nosso arquivo HTML.

  
  Vamos pegar esse menu pequeno! 
  Fim da linha. 

In our : adicionamos a metatag do autor para identificar o criador do arquivo; Depois disso, incluímos o famoso reset.css de Eric Meyer, que irá redefinir quase todos os elementos do seu arquivo HTML, dando-lhe um documento mais limpo e fácil de trabalhar. E já que usaremos o jQuery mais tarde, na última linha do nosso elemento head, nós o importamos através do jQuery CDN.

Eu liguei a maioria dos arquivos para manter o documento o mais simples possível, mas lembre-se de que, se preferir, pode baixar as versões mais recentes de todos esses arquivos e usá-los localmente no arquivo HTML, o que evitará possíveis problemas de compatibilidade de versão ou alterações nesses arquivos no futuro.

Na nossa tag, usamos o padrão HTML5