O Menu de Navegação

Aprenda a criar e configurar o Menu de Navegação do seu site

Uma das partes mais importantes do seu site e uma das primeiras que você terá que modificar é o Menu de Navegação. Entenda como ele funciona e como criá-lo para tornar a experiência de navegação do visitante prática e rápida.

Para facilitar o trabalho de criação do site para quem não tem muita experiência em HTML, o HyperFluxCMS já vem configurado com templates que atendem, a princípio, a maior parte do público a quem ele se destina. Mas há pelo menos um template que você deverá editar: o Menu de Navegação.

O Menu de Navegação oferece aos visitantes uma forma fácil de ir direto a uma postagem ou lista de postagens de seu interesse.

Por exemplo, se seu site é um portal de notícias da cidade, seu menu de navegação pode ter as opções "Geral", "Política", "Eventos", "Esportes" e "Policial". Quando o visitante clicar em uma das opções, lhe será exibida uma lista de postagens recentes dessa categoria.

O HyperFluxCMS oferece originalmente até dois níveis de menu. Além do menu principal, pode haver submenus que são subcategorias dentro de uma opção do menu.

Por exemplo, num site de uma pizzaria, pode haver o menu com opção "Cardápio" com o submenu "Pizzas doces", "Pizzas Salgadas", "Calzones" e "Bebidas". Depois pode haver a opção "Preços", a opção "Endereço" e a opção "Reservas".

Entendendo isso, o primeiro passo é decidir se você realmente deseja um menu no seu site. Provavelmente sim, porque é bem útil e agiliza bastante a navegação do visitante. Mas por um motivo ou outro, pode ser que você não queira ter um menu.

Removendo o Menu de Navegação

Para removendo o Menu, você deve estar logado na conta de um usuário que tenha permissão de Alterar Configurações e Aparência do Site.

Então entre na opção "Templates", localize o template "main-menu" e clique em "Editar".

No conteúdo do campo "Código do template", apague tudo. Salve o template. Agora seu site não possui mais um menu de navegação. Abra uma página qualquer e teste se ele realmente sumiu.

Criando o Menu de Navegação

Mas se você quiser manter o menu, em primeiro lugar você precisará definir o conteúdo do seu site.

Cada item e subitem do menu pode ser:

• uma página fixa do seu site (por exemplo, a página de "Quem Somos"); ou
• uma listagem de páginas por categoria (por exemplo, listar todas as páginas da categoria "Esportes")

Você poderá modificar isso mais tarde, mas é bom já começar seu site com o planejamento de que conteúdo ele va ter e qual merece aparecer no menu principal que aparecerá na maior parte das páginas. Já pense também quais itens do menu terão submenu (lembre do exemplo da pizzaria).

Depois de ter isso em mente, é hora de editar o menu principal de navegação do seu site.

Você deve estar logado na conta de um usuário que tenha permissão de Alterar aparência e configuração do site. Então na opção "Templates", localize o template "main-menu" e clique em "Editar".

O menu que vem originalmente quando você instala o HyperFluxCMS é mais ou menos assim:

[menu]
   [menuitem caption="Categoria1" url="/cat1"]
   [menuitem caption="Categoria2" url="/cat2"]
   [menuitem caption="Categoria3" url="/cat3"]
   [menu caption="Categoria4"]
      [menuitem caption="Categoria4.a" url="/cat4a"]
      [menuitem caption="Categoria4.b" url="/cat4b"]
      [menuitem caption="Categoria4.c" url="/cat4c"]
   [/menu]
   [menu caption="Categoria5"]
      [menuitem caption="Categoria5.a" url="/cat5a"]
      [menuitem caption="Categoria5.b" url="/cat5b"]
      [menuitem caption="Categoria5.c" url="/cat5c"]
   [/menu]
[/menu]

Se o código do template começar com uma linha [pragma....] não mexa nela. Deixe ela como está, a não ser que você saiba mesmo o que está fazendo.

As linhas [menu] e [/menu] também devem ser mantidas. Elas informam o HyperFluxCMS que o que estiver entre as duas linhas são as intruções de como ele deve construir o menu de navegação.

Agora analise o resto e tente entender a estrutura.

Os que aparecem como [menuitem caption="xxxx" url="xxxx"] indicam um item do menu.

O que estiver marcado como caption é o texto que aparecerá. Este é o texto que você deve editar como desejar: "Política", "Esportes", "Planos e Preços", "Reservas", etc. Não esqueça de deixar entre aspas.

O que está indicado como url é a página ou categoria de destino que será aberta quando o visitante clicar nesse item. Pode ser uma página do próprio site, como "/planos" ou uma categoria, como "/pizzas-doces".

Note que aparentemente não há diferença entre uma página fixa do site e uma categoria. Essa é uma característica do HyperFluxCMS. Se o visitante digita, clica ou abre um link, primeiro o HyperFluxCMS verifica se há uma página que tem aquele nome como seu permalink. Se não houver, ele exibe uma listagem das página que contem aquele texto como uma de suas categorias.

Por exemplo, ao tentar acessar o link "nome-do-seu-site.com/ajuda", o HyperFluxCMS primeiro procura se há uma postagem cujo permalink seja "ajuda". Se encontrar, essa postagem é exibida. Se não encontrar, ele cria uma lista com todos as postagens em que "ajuda" seja uma das categorias. Se não houver nenhum, ele mostrará uma lista vazia ou a página de erro "404 Não Encontrado" ou equivalente.

A url também pode ser um link para uma página externa. Por exemplo, para a sua loja num marketplace, ou no iFood, ou numa rede social. Você deve informar a url completa, incluindo o "http://" ou "https://". Por exemplo: "https://shopee.com.br/nome-da-sua-loja-na-shopee"

Voltando a analisar o código do menu de navegação, veja que os itens Categoria1, Categoria2 e Categoria3 são itens simples. Se o visitante clicar em um deles, ele será direcionado à página ou a listagem de postagens "cat1", "/cat2" ou "/cat3", respectivamente.

[menu]
   [menu caption="Cardápio"]
      [menuitem caption="Pizzas salgadas" url="/pizzas-salgadas"]
      [menuitem caption="Pizzas doces" url="/pizzas-doces"]
      [menuitem caption="Calzones" url="/calzones"]
      [menuitem caption="Bebidas" url="/bebidas"]
   [/menu]
   [menu caption="Atendimento"]
      [menuitem caption="Endereços" url="/endereços"]
      [menuitem caption="Horário de atendimento" url="/horario"]
      [menuitem caption="Reservas" url="/reservas"]
   [/menu]
   [menuitem caption="Peça online" url="https://www.ifood.com.br/delivery/cidade-sp/pizzaria-oito-queijos/26390598-5de9-46ad-bd96-aa6a24fdf31c"]
[/menu]