Menus em HyperCode

Como inserir menus e barra de navegação no seu site

Menus ou Barras de Navegação são elementos essenciais para facilitar que o visitante do seu site encontre com rapidez o que procura. Veja como usá-los.

Para a maior parte dos sites, é importante para ter um menu ou barra de navegação. Esses elementos permitem organizar o site por tópicos ou assuntos de forma a facilitar e agilizar a nevegação para que o visitante encontre mais rapidamente a informação que procura.

Na imensa maioria dos casos, o menu de navegação é definido somente nos "templates" de páginas. É bem incomum e não recomendado que uma página de conteúdo tenha um menu próprio de navegação.

No entanto, é permitido ter mais de um modelo de menu se estiverem em templates que não são carregados simultanamente. Por exemplo, o template de "Página Inicial" do seu site pode ter uma barra de navegação com determinado estilo e conteúdo, e as páginas das postagens terem outra, com estilo e conteúdo diferentes.

Uma das primeiras tarefas a se fazer após instalar e configurar o HyperFluxCMS é criar o Menu de Navegação. Veja instruções.

Uma barra de navegação pode ser uma simples barra, normalmente horizontal, com os items. Ou alguns dos items pode ter sub-items, formando um menu.

Uma barra de navegação começa com a tag menu. Depois se listam seus items, que podem ser itens (indicados com menuitem) ou submenus (indicado com menu).

A versão atual do HyperCode suporta apenas dois níveis de menus, o que é suficiente para a imensa maioria dos sites: o principal e um nível de submenu. Para se obter mais níveis é necessário usar HTML, CSS, JavaScript, que devem ser editados por alguém experiente, e não é o propósito deste documento.

Por padrão, o elemento menu do HyperCode/HyperFluxCMS é responsivo e apresenta comportamento adequado para ser exibido de formas diferentes em telas grandes como computadores e telas pequenas como celulares. O comportamento, no entanto, pode ser alterado ou ajustando usando JavaScript e/ou CSS.

Tag [menu]

A tag menu insere um menu ou barra de navegação no site. Ou, se estiver dentro de outra tag menu aberta, cria um submenu.

Sintaxe:

caption é propriedade que deve ser informado somente se o menu for um submenu. Ele indica o texto a ser exibido na posição em que ele se encontra.

caminho-para-imagem é opcional e indica uma imagem, geralmente bem pequena, de uma imagem que será exibida na barra de navegação. Somente é válido para o menu principal, não para submenus.

Propriedade anônima

A propriedade "caption" pode ser omitida e o texto pode ser informado diretamente após o nome da tag.

Propriedades adicionais

Como a maioria tas Tags HyperCode, menu aceita opcionalmente as propriedades class, style e id.

Veja Class, Style, id

Tag [menuitem]

A tag menuitem insere um item em um menu, submenu ou barra de navegação.

Sintaxe:

caption indica o texto a ser exibido.

action é opcional e indica uma sentença ou chamada de função JavaScript a ser executada/chamada quando o visitante clica na opção do menu.

url é opcional e indica uma url ou página do site ou categoria de postagens do site que será aberta quando o visitante clica na opção do menu.

target é opcional e indica uma janela alvo no qual a URL será aberta. Somente deve ser usada com "url", não tendo efeito se só se utilizar action.

UMA das propriedades action ou url deve ser informada.

Propriedades adicionais

Como a maioria tas Tags HyperCode, menu aceita opcionalmente as propriedades class, style e id.

Veja Class, Style, id

Exemplos:

O primeiro item, ao ser clicado, executa "window.close()" em JavaScript, que fecha a janela atual.

O segundo item, ao ser clicado, abre a página do instagram em uma nova janela ou aba.

O terceiro item, ao ser clicado, abre a página chamada "cardápio" na janela/aba atual. Se não existir uma página com esse nome, será exibida uma listagem com postagens que contenham "cardapio" como uma de suas categorias.

Sobre a URL

A propriedade "url" pode indicar:

• uma url completa de uma página dentro do site ou externo, como em "https://hyperfluxcms.com/ajuda";
• uma url relativa, se for uma página dentro do site, como "/ajuda"
• uma categoria de postagens dentro do site, como "/economia", que mostrará uma listagem de postagens que tenham "economia" como uma das categorias.