Como fazer header e sidebar responsivos em html

11 min de leitura

•

10/07/2023

Introdução🌟

Nos dias de hoje, em que cada vez mais pessoas acessam a internet pelo celular e outros dispositivos móveis, é fundamental que os sites sejam responsivos. Além disso, componentes interativos, como header e sidebar, podem tornar a navegação mais fácil e intuitiva, melhorando ainda mais a experiência do usuário.

Ao aprender a criar componentes responsivos e interativos, você não só melhora a experiência do usuário, mas também aumenta a acessibilidade do seu site e o torna mais competitivo no mercado. Então, vamos começar essa jornada juntos e criar sites incríveis! 🚀💻

Importância da responsividade

A responsividade de um site é mega importante nos dias de hoje 📱💻. Um site responsivo se adapta a diferentes tamanhos de tela, mantendo a qualidade e legibilidade do conteúdo. E quando os componentes, como o header e a sidebar, são responsivos, a navegação fica super fácil e intuitiva, independente do dispositivo usado. Ao criar um site responsivo, você aumenta a acessibilidade dele e o torna mais competitivo no mercado, atraindo mais usuários e garantindo uma experiência melhor para todo mundo! 👍

Mão na massa🛠️

Hora de dar o primeiro passo! Precisamos começar com o HTML, o esqueleto do site 💀

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Exemplo de header e sidebar responsivos</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre nós</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </header>
  <aside class="sidebar">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre nós</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </aside>
  <button class="menu-button" aria-expanded="false" aria-controls="sidebar-menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <main>
    <section>
      <h2>Sobre nós</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae eros justo. Nulla facilisi. Fusce a lacinia
        mi. Fusce tempor, nulla eu aliquam convallis, velit elit commodo elit, sit amet finibus quam mauris a risus.
        Aenean ultrices eleifend tincidunt. Praesent non est nibh. Fusce euismod nulla eget efficitur auctor. In a eros
        vitae ipsum suscipit tempor.</p>
    </section>
    <section>
      <h2>Contato</h2>
      <p>Entre em contato conosco:</p>
      <ul>
        <li>Telefone: (11) 1234-5678</li>
        <li>Email: contato@meusite.com</li>
      </ul>
    </section>
  </main>
</body>
<script src="./script.js"></script>
</html>

Vamos dar uma olhada no código HTML utilizado no exemplo. No topo, temos a declaração do tipo de documento (<!DOCTYPE html>), que indica ao navegador qual é o tipo de arquivo que ele deve ler e como interpretá-lo.

Em seguida, temos a tag <html> que contém todo o conteúdo da página, desde o cabeçalho até o corpo. No cabeçalho (<head>), temos informações sobre a página, como a codificação de caracteres (<meta charset="UTF-8">) e o título da página (<title>).

No corpo (<body>), temos o conteúdo da página em si. O header (<header>) é onde fica o menu de navegação principal, que contém links para as seções do site. Já a sidebar (<aside class="sidebar">) é um painel lateral que pode ser utilizado para exibir informações adicionais ou links secundários.

O botão de menu (<button class="menu-button">) é usado para abrir e fechar a barra lateral de navegação, tornando-a responsiva e adaptável a diferentes tamanhos de tela. O atributo aria-expanded="false" indica que a barra lateral de navegação está inicialmente fechada, enquanto aria-controls="sidebar-menu" faz referência ao ID da barra lateral de navegação.

Por fim, temos o conteúdo principal (<main>) da página, que é dividido em duas seções (<section>): "Sobre nós" e "Contato". Cada seção contém um título (<h2>) e um texto descritivo (<p>) sobre a empresa e informações de contato, respectivamente.

No final do código, temos um script (<script>) que faz referência a um arquivo JavaScript externo (<script src="./script.js"></script>), usado para adicionar interatividade à página.

CSS

O CSS é uma linguagem de folha de estilo responsável por deixar as páginas web com uma aparência visual incrível. Ele é composto por seletores que indicam quais elementos HTML serão estilizados e por propriedades que definem como esses elementos serão estilizados.

Em outras palavras, o CSS é o que dá vida ao HTML, deixando-o muito mais bonito e atraente.

Legal, né? Com o CSS, é possível criar páginas web incríveis e que se adaptam a diferentes dispositivos.

Vamos começar com estilos para mobile

/* Estilos para mobile */
@media (max-width: 768px) {
  header {
    display: none;
  }

  /* Estilos para o botão de menu */
  .menu-button {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #333;
    border: none;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 20px;
    height: 3px;
    background-color: #fff;
    margin: 5px auto;
  }
}

Agora definimos estilos para desktop

/* Estilos para desktop */
@media (min-width: 769px) {
  header {
    display: block;
  }

  .menu-button {
    display: none;
  }
}

E por fim alguns estilos gerais que servem tanto para desktop quanto para mobile

/* Estilos gerais */
body {
  margin: 0;
}

header {
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 10px;
}

a {
  color: #fff;
  text-decoration: none;
}

.sidebar {
  display: block;
  top: 0px;
  left: 0;
  translate: 0px 0px;
  min-height: 100vh;
  min-width: 200px;
  width: 200px;
  position: fixed;
  background-color: #333;
  translate: -100% 0px;
  transition: 0.5s ease;
}

.sidebar nav ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 0px;
}

.sidebar nav ul li {
  margin: 20px 0px;
}

.sidebar.open {
  translate: 0px 0px;
}

main {
  margin: 10px;
  padding-top: 50px;
}

Então, a gente pode ver que rolou uma estilização maneira pra diferentes dispositivos (tipo celular e computador) e também uns estilos gerais pra toda a página. Aí embaixo, vamos dar uma explicação mais detalhada de cada parte do código:

Estilos para mobile
Para dispositivos com largura máxima de 768 pixels, o primeiro conjunto de estilos é aplicado. Nessa condição, o elemento header é ocultado usando a propriedade display: none, enquanto o botão de menu é exibido usando a propriedade display: block. O botão de menu é fixado na tela usando position: fixed e posicionado usando top e right. Além disso, as dimensões e a cor de fundo do botão de menu são definidas, bem como o estilo das três barras que compõem o botão.
Estilos para desktop
O segundo conjunto de estilos é aplicado nos dispositivos com largura mínima de 769 pixels. Nesta condição, o elemento header é exibido com a propriedade display: block, e o botão de menu é ocultado com a propriedade display: none.
Estilos gerais
Este conjunto de estilos é aplicado a toda a página. O corpo da página tem margem zero (body { margin: 0; }). O elemento header tem cor de fundo, cor de texto, altura e preenchimento estilizados. As listas ordenadas e não ordenadas têm margem, preenchimento e estilo de lista removido. Os elementos li são exibidos em linha e espaçados com margem à direita. Os elementos a têm cor de texto e sublinhado removidos. O elemento aside é posicionado de forma fixa, com altura mínima e largura fixa de 200 pixels, e tem transição de meio segundo para criar o efeito de abertura e fechamento. A navegação dentro da aside tem estilo de coluna e espaço entre itens. O elemento main é estilizado com margem e preenchimento para afastá-lo do cabeçalho.

Javascript

Finalizamos com a parte lógica do projeto, utilizando JavaScript para tornar os elementos interativos.

const menuButton = document.querySelector('.menu-button');
const sidebar = document.querySelector('.sidebar');

menuButton.addEventListener('click', () => {
  console.log('toggle')
  const expanded = menuButton.getAttribute('aria-expanded') === 'true' || false;
  menuButton.setAttribute('aria-expanded', !expanded);
  sidebar.classList.toggle('open');
});

O código começa com a declaração de duas constantes, menuButton e sidebar, que são selecionadas a partir do documento HTML utilizando o método querySelector.

const menuButton = document.querySelector('.menu-button');
const sidebar = document.querySelector('.sidebar');

A constante menuButton seleciona um elemento com a classe menu-button, enquanto a constante sidebar seleciona um elemento com a classe sidebar. Esses elementos provavelmente estão presentes no documento HTML e serão manipulados pelo código JavaScript.

Em seguida, adicionamos um listener de eventos ao botão de menu usando o método addEventListener. Esse ouvinte será acionado quando o botão for clicado e executará uma função que irá alterar o estado da barra lateral de navegação.

menuButton.addEventListener('click', () => {
  const expanded = menuButton.getAttribute('aria-expanded') === 'true' || false;
  menuButton.setAttribute('aria-expanded', !expanded);
  sidebar.classList.toggle('open');
});

Dentro dessa função, temos a definição da constante expanded, que recebe o valor do atributo aria-expanded do botão de menu. Esse atributo é usado para indicar se a barra lateral de navegação está aberta ou fechada. Se o aria-expanded estiver definido como 'true', a constante expanded receberá o valor true. Caso contrário, a constante expanded receberá o valor false.

const expanded = menuButton.getAttribute('aria-expanded') === 'true' || false;

Na linha seguinte, temos a atribuição do valor contrário à constante expanded ao atributo aria-expanded do botão de menu. Essa atribuição é feita utilizando o método setAttribute.

menuButton.setAttribute('aria-expanded', !expanded);

Dessa maneira, se o atributo aria-expanded estiver definido como "verdadeiro", ele será mudado para "falso". Caso contrário, ele será alterado para "verdadeiro".

Por fim, temos a utilização do método classList.toggle na constante sidebar, que alternará a classe "open" na barra lateral de navegação. Essa classe é responsável por definir o estado de abertura ou fechamento da barra lateral de navegação.

sidebar.classList.toggle('open');

Conclusão👏

Em resumo, tornar componentes como header e sidebar responsivos é fundamental para melhorar a experiência do usuário e aumentar a acessibilidade do seu site. Utilizando HTML, CSS e JavaScript, é possível criar páginas incríveis e adaptáveis a diferentes dispositivos. Ao aprender essas habilidades, você poderá criar sites mais competitivos e atrativos para seus usuários. Então, não perca mais tempo e comece a criar seus próprios componentes responsivos agora mesmo! 🚀💻

Lucas Matheus

Sou uma pessoa apaixonada no impacto e em ensinar pessoas. Criei a Firstday com o objetivo de impactar vidas e ensinar pessoas a se tornarem desenvolvedores web experientes por meio da prática. Oferecemos uma formação completa em tecnologias de front-end, com projetos desafiadores e mentoria personalizada para ajudar nossos alunos a se destacarem no mercado de trabalho.