Ir para o conteúdo principal

Como criar um menu sensível para WordPress móvel

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 701.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Deseja criar um menu móvel responsivo no seu blog WordPress?

Os usuários de celular superam os de desktop atualmente. Adicionar um menu móvel responsivo torna mais fácil para os usuários navegar em seu site.

Neste tutorial, mostraremos como criar facilmente um menu responsivo no WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

Como criar um menu de wordpress móvel responsivo

Aqui, será uma questão de aprofundar, mostrando a você o método com um plugin para iniciantes e o método de codificação para usuários avançados.

Primeiro método: Crie um menu móvel com um plugin do WordPress

Este método é mais fácil e recomendado para iniciantes, pois não requer nenhuma habilidade especial de codificação.

Neste método, criaremos um menu (com um ícone de hambúrguer) que desliza na tela do celular.

Plug-in de menu do WordPress responsivo

A primeira coisa que você precisa fazer é instalar e ativar o Plug-in de menu responsivo do WordPress . Para mais detalhes, confira nosso guia sobre como instalar um plugin do WordPress .

Depois de ativar o plug-in, o plug-in adicionará um novo item no menu, intitulado " menu de Responsive " Clicar nele o levará para a página de configurações do plug-in do WordPress.

Plug-in de menu do painel responsivo para WordPress

Você deve primeiro inserir o tamanho a partir do qual o menu móvel deve aparecer. O padrão é 800px, que deve funcionar para a maioria dos sites.

Depois disso, você deve selecionar o menu que deseja usar no celular.

A última opção na tela permite que você forneça uma classe CSS para o seu menu. Isso permitirá que o plug-in oculte o menu que não responde em telas pequenas.

Não se esqueça de clicar em « update Options Para salvar suas configurações.

Sugerimos também que você descubra nossa Plugins WordPress 10 para criar menus no seu blog

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Agora você pode visitar seu site e redimensionar a tela do navegador para ver o menu responsivo em ação.

Site-em-ação-menu sensível-móvel

O plugin « menu de Responsive »Oferece muitas outras opções que permitem modificar o comportamento e a aparência de seu menu responsivo. Você pode explorar essas opções na página de configurações do plug-in e ajustá-las conforme necessário.

Método 2: Como adicionar um menu móvel manualmente

Um dos métodos mais comuns usados ​​para exibir um menu em telas de dispositivos móveis é usar alavancagem.

Este método requer que você adicione código personalizado aos seus arquivos do WordPress.

Em um dos nossos tutoriais anteriores, mostramos a você como criar um plugin para WordPress.

Primeiro você precisa abrir um editor de texto como o Bloco de notas e colar este código.

(Function () {nav = document.getElementById ( 'Site-navegação'), botão, menu de var; if (NAV) {return ;!} Botão = nav.getElementsByTagName ( 'botão') [0] = menu de navegação. getElementsByTagName ( 'ul') [0] se {return;} (botão!) // Ocultar botão se menu é ausente ou vazio if (|| menu de menu.childNodes.length!) = {button.style.display. 'none'; retorno;} button.onclick = function () {if (-1 === menu.className.indexOf (nav-menu de ')) {menu.className = nav-menu de';} if (- ! == 1 button.className.indexOf ( 'ser alternado')) {button.className button.className.replace = ( 'ser alternado', ''); menu.className menu.className.replace = ( 'alternado -on '' ');} else {button.className + =' alternado-on '; menu.className + =' alternado-on ';}};}) (jQuery);

Agora você precisa salvar este arquivo com o nome " Navigation.js Na sua mesa.

Em seguida, você precisa abrir um cliente FTP para baixar esse arquivo no local "/ wp-content / themes / your-theme / js /" no site do WordPress.

Substitua a expressão " your-theme Com o nome da pasta de temas do WordPress atual. Se o diretório do seu tema não tiver uma pasta js, será necessário criar uma.

Depois de fazer o upload do arquivo JavaScript, a próxima etapa é certificar-se de que seu site WordPress carregará os arquivos JavaScript. Você precisará adicionar o seguinte código ao " functions.php Do seu tema WordPress.

Descubra outra coisa O que você pode fazer com o arquivo functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', de matriz (' jquery '), 20160909', verdadeiro.);

Agora temos que adicionar o menu de navegação no nosso tema WordPress. Normalmente, o menu de navegação é adicionado ao arquivo " header.php Do seu tema WordPress.

Cardápio 'principal', 'menu_class' => 'nav-menu')); ?>

Assumimos que o local do menu definido pelo seu tema WordPress é chamado de primário " Caso contrário, use o local definido pelo seu tema WordPress.

Descubra também nossa 5 plugins do WordPress para criar formulários de inscrição

A última etapa é adicionar algum CSS para que nosso menu use as classes CSS corretas para alternar quando visualizado em dispositivos móveis.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

/ * Menu de navegação * / .main-navigation {margin-top: 24px; margem superior: 1.714285714rem; alinhamento de texto: centro; } .main-navigation li {margin-top: 24px; margem superior: 1.714285714rem; tamanho da fonte: 12px; tamanho da fonte: 0.857142857rem; altura da linha: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS para usar em dispositivos móveis @ tela de mídia e (largura mínima: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: bloco embutido! importante; alinhamento de texto: esquerda; largura: 100%; } .main-navigation ul {margin: 0; recuo de texto: 0; } .main-navigation li a, .main-navigation li {display: inline-block; decoração de texto: nenhum; } .main-navigation li a {border-bottom: 0; cor: # 6a6a6a; altura da linha: 3.692307692; transformação de texto: maiúsculas; espaço em branco: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; margem: 0 2.857142857rem 0 0; posição: relativa; } .main-navigation li ul {margin: 0; preenchimento: 0; posição: absoluta; Os 100 melhores%; índice z: 1; altura: 1px; largura: 1px; estouro: oculto; clipe: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; esquerda: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clipe: herdar; estouro: herdar; altura: herdar; largura: herdar; } .main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; display: bloco; tamanho da fonte: 11px; font-size: 0.785714286rem; altura da linha: 2.181818182; preenchimento: 8px 10px; preenchimento: 0.571428571rem 0.714285714rem; largura: 180px; largura: 12.85714286rem; espaço em branco: normal; } .main-navigation li ul li a: pairar, .main-navigation li ul li a: focus {background: # e3e3e3; cor: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; intensidade da fonte: Negrito; } .menu-toggle {display: none; }}

Agora você pode visitar seu site e redimensionar a tela do navegador para ver se o menu responsivo alterna.

Balançar-menu do wordpress-tutorial

Descubra também alguns plugins premium do WordPress  

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. UberMenu

UberMenu é um plugin WordPress dedicado à criação de um megamenu altamente customizável, responsivo e acessível aos usuários. É funcional após a instalação, sem a necessidade de configuração especial.

Ubermenu Wordpress Mega Menu Plugin

É um plugin fácil de usar, mas poderoso o suficiente para criar mega layouts de menu altamente personalizáveis ​​e criativos.

Veja também nosso 9 plugins do WordPress para criar tabelas de preços em um blog

Você encontrará, entre outros: 3 modelos de menu, layout totalmente responsivo, compatibilidade com dispositivos móveis (iPhone, iPad, Android), suporte para toque, etc ...

Descarregar | Demo | hospedagem na web

2. LMM

Liquida Mega Menu, também chamado de LMM, é um plugin WordPress projetado para usuários e desenvolvedores. Possui uma interface simples e intuitiva, integrada com o painel do WP, permitindo criar e personalizar uma quantidade ilimitada de mega menus, sem qualquer habilidade de programação.

Mega menu responsivo do Lmm wordpress baseado em bootstrap

Ele vem com dezenas de recursos, seja para usuários regulares ou avançados. Como funcionalidades oferece entre outras: integração automática e manual, suporte para multisite, cuidando de temas infantis, estilo completamente personalizável para menus, localizações de menu personalizáveis, menu fixo, etc.

Descarregar | Demo | hospedagem na web

3. 8Degree Fly Menu

8Degree Fly Menu é um plugin premium para WordPress que permite adicionar um menu de tela ao seu site, a fim de dar uma aparência que destaque e facilmente suas informações. Ele usa a função de menu padrão do WordPress para criar seus menus.

Plugin de menu de tela responsivo de 8 graus para Wordpress

Você poderá adicionar elementos adicionais aos itens de menu padrão, como ícones, slogans de menu, um cabeçalho de pseudo-agrupamento e uma descrição longa.

Leia também: 10 plugins do WordPress para otimizar barras laterais e cabeçalhos

Ele também vem com um editor WYSIWYG para ajudá-lo a entender sua descrição longa de uma maneira fácil de usar.Com este editor, você também pode usar códigos de acesso.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

É isso aí! É isso neste tutorial, espero que permita criar um menu para usuários móveis. sinta-se livre para compartilhe a dica com seus amigos em suas redes sociais.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...

Este artigo contém comentários 2

  1. Olá

    obrigado pela sua informação

    Não consigo encontrar "uma classe CSS para o seu menu". encontrei a folha de estilo css mas não sei o que copiar e colar

    Agradeço antecipadamente por sua ajuda

    bom fim de semana

    michel

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo