Criar um menu de deslizamento

Sep 14, 2025

Como

Uma ótima maneira de melhorar o experiência de usuário No seu site é adicionar um menu de deslizamento; Ele cria uma maneira atraente para os usuários encontrarem o que querem - onde quer que possam estar na página - e significa que eles não precisam rolar de volta até o Nav.

Nós particularmente amamos o menu deslizante no site para Cosméticos de sorvete , projetado por Hiroka Hasegawa. (Se você vir sites que você gosta, certifique-se de salvá-los em armazenamento na núvem para inspiração). Leia para descobrir como replicar esse efeito deslizante no seu próprio site. Perigo para criar um site que faça uma impressão? O certo hospedagem na web. serviço ou Construtor de sites vai fazer exatamente isso.

01. Iniciação de documentos

O primeiro passo é definir o documento da página. Isso consiste em um contêiner HTML representando a página da Web, que contém a cabeça e a seção do corpo. Enquanto a seção principal é usada para carregar os recursos CSS e JavaScript externos, a seção do corpo é usada para armazenar o conteúdo da página visível criado na etapa # 2.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; deslize o menu & lt; / title & gt;
& lt; link rel = "stylesheet" tipo = "texto / css" media = "tela" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
*** Etapa 2 aqui
& lt; / corpo & gt;
& lt; / html & gt;

02. Conteúdo da página.

O conteúdo da página consiste em um título de cabeçalho, juntamente com um recipiente de navegação. Esta navegação armazena uma série de links e foi atribuída a um atributo 'Data-Action'. É esse atributo que será usado pelo JavaScript e pelo CSS para aplicar o estilo e a funcionalidade ao contêiner e seus elementos.

 & lt; h1 & gt; deslize o menu & lt; / h1 & gt;
& lt; nav de dados-action = "expandir" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; página 1 & lt; / a & gt;
  & lt; a href = "#" & gt; página 2 & lt; / a & gt;
  & lt; a href = "#" & gt; página 3 & lt; / a & gt;
& lt; / NAV & GT;

03. Iniciação de CSS.

O HTML agora está completo, então crie um novo arquivo chamado 'Styles.css' para iniciar a formatação de apresentação. Esta etapa define o documento HTML e seu corpo para não ter espaçamento de borda visível, junto com um fundo preto. A cor é ajustada para branco como a cor padrão para o texto do conteúdo herdar.

 HTML, corpo {
  Exibir: bloco;
  Largura: 100%;
  Altura: 100%;
  Antecedentes: # 000;
  cor: #fff; }

04. Configuração de Navegação

A navegação é exibir com posicionamento fixo e com um índice z acima de tudo para que ele possa parecer cobrir a tela cheia, independentemente de onde o usuário tiver voltado para. É inicialmente posicionado fora de vista no lado esquerdo da viewport visível da tela. Uma regra de transição é aplicada para animar quaisquer alterações durante uma duração de um segundo.

 nav {
  Exibir: bloco;
  Posição: fixo;
  Caixa-dimensionamento: border-box;
  top: 0;
  esquerda: -100VW;
  Z-index: 9999;
  preenchimento: .5em 1em .5em 1em ;;
  Largura: 100VW;
  Altura: 100vh;
  Alinhamento de texto: centro;
  Fundo: vermelho;
  Transição: todos os 1s; }

05. NAV Aberto e ícone

A posição da esquerda da navegação é definida como zero quando uma classe 'aberta' foi aplicada, acionando a transição animada definida na etapa anterior. O primeiro filho da navegação é o ícone de expansão, que usa posicionamento fixo para permanecer sempre visível no centro do lado esquerdo da tela.

 nav.open {
  Esquerda: 0;
}
Nav *: primeiro filho {
  Posição: fixo;
  preenchimento: 1em;
  Cursor: Ponteiro;
  Esquerda: 0;
  top: 50vh;
  limpar ambos; }

06. Links de navegação.

Cada link de âncora dentro do recipiente de navegação é definido para ser quatro vezes o tamanho do texto padrão. Sua cor é definida para preto, com uma margem aplicada no topo para garantir o espaçamento vertical é visível. Definir sua exibição como "bloco" faz com que cada link seja automaticamente empilhado verticalmente.

 nav A {
  Exibir: bloco;
  Tamanho da fonte: 4em;
  cor: # 000;
  Font-família: Arial;
  Decoração de texto: nenhuma;
  margem-topo: .2em;
}

07. ouvinte JavaScript.

Crie um novo arquivo chamado 'code.js'. Esta etapa aguarda até que a página tenha sido carregada, sobre a qual ele procura o primeiro filho de todas as navegações com o atributo 'Data-Action' definido como 'expand'. Este primeiro filho, sendo o ícone aberto, tem um ouvinte de eventos 'clicar' aplicado, sobre o qual alterna o elemento para ter ou não ter uma classe 'aberta' aplicada.

 janela.addeventListener ("Carregar", Função () {
  var nós = document.Queryselectorall ('NAV [Data-Action = "Expand"] *: Primeiro filho');
  para (var i = 0; i & lt; nós.length; i ++) {
  nós [i].addeventlistener ("clique", função () {
  if (isto.parentnode.className == "Abrir") este.parentnode.className = "";
  mais isso.parentnode.className = "Open";
  });
  }
});
***

Este artigo foi originalmente publicado em questão 274 da revista Creative Web Design Web Designer. Comprar edição 274 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

Tendências de navegação na Top Web
10 Regras da Grande Experiência do Usuário
Adicione pistas visuais ao seu site

Criar um menu de deslizamento

01. Iniciação de documentos

02. Conteúdo da página.

03. Iniciação de CSS.

04. Configuração de Navegação

05. NAV Aberto e ícone

06. Links de navegação.

07. ouvinte JavaScript.

Como - Artigos mais populares

Cinema 4D Tutoriais: 13 dos melhores

Como codificar efeitos de texto inteligentes com CSS

Criar efeitos de colagem no navegador com CSS

5 maneiras de impulsionar o SEO do seu site

Pinte uma cena clássica do conto de fadas com procriate

Como ilustrar para um evento

Como adicionar drama às suas obras de arte pastel

Criar visuais 3D interativos com três.js

Categorias