Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Como mostrar menus de navegação no meu layout?

Dentro do seu administrador você pode criar menus para incluir links que podem ser categorias, páginas de conteúdo, links externos etc. Estes menus podem ser independentes ou podem serem incluídos em outros menus como sub-menus.

É possível acessar os diferentes menus a partir da variável menus. Por exemplo, um menú chamado “Rodapé” pode ser acessado em menus.rodape e contém objetos do tipo . Sempre haverá o menu principal que não pode ser removido e sempre se encontra disponível na variável navigation.

Ter poder ter um menu com sub-menus, e que estes possam ter seus próprios sub-menus, recomendamos usar um snipplet recursivo.

Exemplo do snipplet recursivo navigation.tpl:

{% for item in navigation %}
    <ul class="menu">
        {% for item in navigation %}
            <li><a href="{{ item.url | default('#') }}" class="{{ item.current ? 'selected' : '' }}" {% if item.url | is_external %}target="_blank"{% endif %}>{{ item.name }}</a>
            {% snipplet "navigation.tpl" with navigation = item.subitems %}
            </li>
        {% endfor %}
    </ul>
{% endfor %}

Para que os elementos da navegação que são apenas menus e não possuem link próprio, podemos capturar o click pelo javascript para que nenhuma ação seja realizada. Em layout.tpl:

$('.menu a[href=#]').click(function(){
    return false;
});

Outra vantagem de usar esse snipplet é que o mesmo pode ser usado em menus que não sejam o principal. Por exemplo, se possui um menu chamado “Rodapé”, você pode usar o seguinte código em layout.tpl:

{% snipplet "navigation.tpl" with navigation = menus.footer %}

Se quer permitir que seu cliente escolha qual menu utilizar sem obrigá-lo a usar um nome fixo, pode usar um arquivo de configuração em settings.txt.