Menu MODX multinível usando Bootstrap. Alterando o menu superior Alterando a ordem dos itens do menu
Nas lições anteriores já criamos um menu MODX: 1º - e 2º - Saída de um menu suspenso MODX padrão usando Bootstrap. Hoje aprenderemos como exibir menus Bootstrap de vários níveis com um grau ilimitado de aninhamento (menu de 3 níveis, 4 níveis, 5 níveis, etc.).
Por exemplo, vou exibir um menu Bootstrap de 5 níveis, mas você pode torná-lo de 3 níveis ou 7 níveis, até 10, alterando o valor nível para o que você precisa!
Exibindo um menu Bootstrap multinível (com aninhamento ilimitado) no MODX usando PdoMenu.
A saída do menu multinível será assim:
[]>[[+invólucro]]`&tplInner=`@INLINE
` &tplParentRow=`@INLINENão vai funcionar imediatamente. como o Bootstrap 3 por padrão suporta apenas 2 níveis de aninhamento, e para expandir o nível de aninhamento do menu do bootstrap 3, você precisa incluir um arquivo js com o seguinte conteúdo.
(function($)( $(document).ready(function())( $("ul.dropdown-menu ").on("clique", function(event) ( event.preventDefault(); event.stopPropagation( ) ; $(este).parent().removeClass("abrir"); $(este).parent().toggleClass("abrir" ));
Depois disso, o 3º, o 4º, etc. começarão a abrir. níveis de aninhamento. Em princípio tudo, mas tem uma coisa, este menu vai abrir todos os níveis, e isso, na minha opinião, não é particularmente correto nem bonito, mas pode ser corrigido com Ajuda CSS.
No meu caso, foram necessárias 2 linhas de código CSS para fazer os níveis caírem lateralmente.
Ul.dropdown-menu (esquerda: 100%; topo: -8px;) li.submenu1.dropdown.open>ul.dropdown-menu (esquerda: 0%; topo: 100%;)
Você pode receber um código ligeiramente diferente (mas idêntico) e o número de linhas pode ser maior se você tiver vários ramos de menu com submenus. Bom, ainda tem algumas coisinhas que você terá que ajustar o CSS ao seu gosto, meu objetivo é mostrar o básico. Como encontrar as classes CSS necessárias no código ao qual você precisa aplicar estilos é mostrado no vídeo, mas para ser mais preciso, todo o processo de criação de um menu multinível é mostrado lá.
Este é o menu do meu vídeo:
Se você precisasse girar os triângulos em um menu suspenso (eles apontam para baixo quando os itens caem à esquerda), ficaria assim.
Em seguida, adicione o seguinte código CSS:
Li.submenu2.dropdown>a>span.caret ( -moz-transform: girar(-95deg); -ms-transform: girar(-95deg); -webkit-transform: girar(-95deg); -o-transformar: girar (-95deg); transformar: girar (-95deg); -ms-transform: girar (-95deg); - webkit -transformar: girar(-95deg); -o-transformar: girar(-95deg); transformar: girar(-95deg); 95 graus);
Data de publicação: 07/02/2011
Neste tutorial simples vou mostrar como personalizar o menu.
Certa vez, me pediram para corrigir um bug em um menu de um site - alguns itens teimosamente não queriam se alinhar, mas apareciam em locais inesperados na página ao passar o cursor. O bug não estava em CSS torto, como presumi inicialmente, mas em uma chamada tortuosa do Wayfinder.
O que é o Wayfinder- este é um snippet usado quando você precisa exibir uma lista de documentos em uma(s) seção(ões). Como resultado do snippet, uma lista não numerada é gerada. Usando vários parâmetros, você pode fazer qualquer coisa com esta lista :) Você pode ler mais na documentação ou digitando no Google - “wayfinder modx wiki”.
Anotações importantes:
1. Sobre o que é MODx, como instalar o MODx, como organizar a estrutura dos documentos, como fazer um template a partir de html, o que é um pedaço, etc. Não considero perguntas de iniciantes nesta lição.
2. Os espaços reservados que utilizarei na lição são indicados no formato que a versão Evo “entende”. Qual é a diferença, veja o exemplo:
Então, vamos ver como criar um menu passo a passo.
Passo 1
Para a lição esbocei este menu:
Aqui, para maior clareza, apliquei diferentes estilos a diferentes níveis de menu. No site onde corrigi o bug do menu, era aproximadamente o mesmo - cada nível de menu tem seu próprio estilo.
Layout - os detalhes do layout não estão incluídos no escopo desta lição, este é o código que obtive:
Depois de admirar o código, determinamos por nós mesmos qual classe em nosso menu é responsável por quê (se você estiver fuçando no código de outra pessoa, isso deve ficar claro no seu):
ul class="menu" - classe de todo o menu
li class="top" - classe de itens de menu de nível superior
a class="top_link" - classe para links em itens de nível superior
ul class="sub" - classe para o submenu
bem, span class="down" para projetar itens de nível superior
Passo 2. Crie três documentos
Produtos
- Entrega
- Fornecedores
Criamos documentos filhos para o documento “Produtos”: “Soro da Verdade”, “Remédio Makropoulos”, “Remédios Universais”.
Etapa 3. Coloque o menu em um bloco separado
No template, no local onde deveria ter um menu, remova todos os códigos desnecessários (o Código HTML menu), escrevemos em vez disso
(( cardápio))Assim, colocamos o menu em um bloco separado. Então criamos um novo pedaço e o chamamos cardápio. Por enquanto, você pode copiar o código do menu criado no conteúdo do bloco. Para maior clareza.
Vá ao painel de administração em “Site” -> “Visualizar” - para verificar se está tudo bem com os caminhos para o arquivo de estilo e imagens.
Ocorrido? Ok, mas este ainda não é um menu. Vamos dar vida a isso com a ajuda do Wayfinder.
Passo 4
Remova todo o conteúdo do pedaço de menu e chame o snippet do Wayfinder.
Por enquanto vamos escrever assim:
parâmetro startId- indica de qual documento começar a formar a lista. Especificamos 0 - isso significa que a lista é formada a partir da raiz da árvore do documento.
Vamos ver o que aconteceu:
Este é um menu funcional e ao vivo. Renomear documentos, excluir, adicionar - o menu será formado de acordo com a árvore de documentos.
Etapa 5
5.1. Agora trazemos a aparência do menu de volta ao normal
O Wayfinder por padrão gera um código simples () , todas as classes de listas e elementos são especificadas por parâmetros especiais quando chamadas.
No início da lição, determinamos quais classes CSS em nosso menu são responsáveis por quê. O Wayfinder tem os parâmetros que precisamos: classe externa- classe para o contêiner do menu. Comparando com nosso layout, obtemos a seguinte chamada do Wayfinder:
[[ Localizador de caminho? &startId=`0` &level=`2` &outerClass=`menu`]]além de parâmetros com classes, indicamos nível de aninhamento - &level=`2`.
Observamos as deficiências - não há classes para itens de menu de nível superior, nem tags e uma classe para o submenu.
Todas essas deficiências são corrigidas adicionando os parâmetros apropriados à chamada do Wayfinder.
5.2. Adicionando classes a itens e tags de nível superior
Existe uma variável para isso linhaTpl, que descreve um modelo para um item de menu, criamos esse modelo, para isso criamos um pedaço chamado pai:
Na chamada do Wayfinder, adicionamos &rowTpl=`pai` .
Não se esqueça de verificar fonte- quase tudo está bem, resta apenas um submenu.
Para configurar o submenu, use a variável innerRowTpl.
Criando um pedaço interno:
Adicione uma variável à chamada do Wayfinder innerRowTpl=`interno` e uma variável que especifica a classe para o contêiner do submenu &innerClass=`sub` .
A chamada final do Wayfinder é assim:
[ ]É isso, nosso cardápio está pronto. Boa sorte!
Localizador de caminho serve para organizar listas de links para MODX. Graças ao suporte de modelos, permite exibir listas na forma desejada:
- Menu em forma de lista, tabela, imagens, ícones, etc.
- Menus estáticos
- Menu com vários efeitos (suspenso, suspenso, etc.)
- Mapa do site
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`ativo`
&rowClass=`eNav_li`]]
Parâmetros de trecho:
&startId- eu ia página pai, se você especificar 0, será da raiz do site. O valor padrão é o id da página ativa
&displayIniciar - mostrar documento com startId no título do menu, padrão falso
&nível- profundidade de aninhamento, padrão 0 - todos os níveis
&limite- limitar o número de páginas na saída (padrão 0 - sem restrições)
&ignorarOculto- ignore a caixa de seleção da página "Mostrar no menu", ou seja, se você especificar 1, todas as páginas serão exibidas. O padrão é 0. Somente as páginas que possuem a caixa de seleção “Mostrar no menu” marcada são exibidas.
&f - o nome do substituto que substitui os resultados impressos diretamente. Padrão 0.
&depurar- modo de depuração (padrão 0)
&ocultarSubMenus - expanda apenas o submenu ativo (padrão 0)
&removerNovasLinhas- remove o caractere de quebra de linha durante a saída (padrão 0)
&textOfLinks- para o nome do link do menu. Opções possíveis:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . Padrão título do menu
&titleOfLinks- para o título do link do menu Opções:menutitle, id, pagetitle, descrição, pai, alias, título longo, introtexto. Padrão título da página
&rowIdPrefix- define o id (rowIdPrefix + docId) para cada elemento. Padrão 0
&incluirDocumentos- id dos documentos separados por vírgulas que serão incluídos no menu (não especificado por padrão)
&excluirDocumentos - id dos documentos separados por vírgula que serão excluídos do menu (padrão 0)
&contextos- contexto para geração de menu. O padrão é atual.
&startIdContext - ID do contexto do qual os documentos são retirados para gerar o resultado.
&configuração - Externo arquivo PHP, para armazenar a configuração do Wayfinder (exemplo: core/components/wayfinder/configs).
&esquema - Formato para geração de URLs. Valores possíveis (com base na chamada da API makeURL):
1: (padrão) URL relativo ao site_url;
0: veja http;
1: veja https;
completo: URL absoluto começando com site_url;
abs: URL absoluta começando com base_url;
http: URL absoluta, forçada no esquema http;
https: URL absoluta, forçada no esquema https.
&ordenar por - O campo pelo qual a classificação ocorre. (padrãoíndice de menu)
Opções:
eu ia, menutitle, pagetitle, introtext, menuindex, publicado, hidemenu, pai, isfolder, descrição, alias, longtitle, tipo, modelo&ordem de classificação- Ordem de classificação."ASC" ou "DESC". ASC padrão
&onde - Estilo JSON de parâmetros de filtragem (Corresponde a onde no MySQL). Por exemplo, quando você precisa ocultar um blog ou notícias do complemento Artigos: &where=`[("class_key:!=": "Article")]`
Exemplos:
apenas pastas de saída: & where = `isfolder = 1
&aquiId - Determine o ID atual a ser usado no snippet. Use o valor [[*id]] se o modelo for especificado usando o parâmetro hereTpl e activeRowParentTpl não for aplicado corretamente no item de menu. O padrão é o ID atual.
Ele só precisa ser especificado se o próprio script o definir incorretamente, por exemplo, ao exibir um menu de um pedaço de outro trecho.
&aquiTpl - O modelo hereTpl é usado quando o item atual é exibido no menu.
Possíveis espaços reservados:
[[+wf.classes]] - local para especificar a classe CSS a ser usada (inclui class=" ")
[[+wf.classnames]] - contém apenas o nome da classe CSS (não inclui class=" ")
[[+wf.link]] - endereço (href) do link
[[+wf.title]] - texto para o título do link
[[+wf.linktext]] - texto do título do link
[[+wf.wrapper]] - local para exibir o submenu
[[+wf.id]] - saída de um identificador exclusivo (id)
[[+wf.attributes]] - exibe atributos de link adicionais
[[+wf.docid]] - identificador do documento para o elemento atual
[[+wf.subitemcount]] - número de itens na pasta
[[+wf.description]] - exibe os valores do campo de descrição
[[+wf.introtext]] - exibe os valores do campo introtexto
Modelo de exemplo:
Opções de modelo
Esses parâmetros especificam os pedaços que contêm os padrões que irão gerar a saída do Wayfinder.
EM Versão Atual Wayfinder para MODX Revolution, você pode acessar suas TVs personalizadas usando espaços reservados de prefixo wf. , por exemplo [[+minha_TV]]
No momento da redação deste artigo, apenas os valores originais da TV serão retornados - eles não serão formatados. Por exemplo, se a sua TV for uma imagem, um uso típico dessa TV dentro do seu modelo seria retornar o arquivo completo etiqueta completa imagem, mas dentro do modelo Wayfinder - apenas o caminho para a imagem será retornado.
Se quiser lidar com TV, você pode fazer isso chamando um snippet dentro do modelo de linha do Wayfinder (&rowTpl . Por exemplo, sua imagem de TV é chamada ícone e geralmente o modelo usa código como este para saída:
... 
Mas como isso não permitirá processar a TV, você precisará substituí-la por:
... 
E agora dentro do snippet processTV colocamos o seguinte código PHP:
getObject("modResource", $meuId); return $doc->getTVValue($myTV);
Como resultado, uma imagem de TV totalmente processada é retornada.
&outerTpl
O nome do pedaço que contém o modelo de contêiner externo.
Espaços reservados disponíveis:
- wf.classes - exibe classes retiradas do conjunto de parâmetros Wayfinder (incluindo o atributo class="")
- wf.classnames - exibe nomes de classes (sem class="")
- wf.wrapper - saída de conteúdo interno (linha).
O parâmetro &innerTpl contém o mesmo conjunto de espaços reservados que &outerTpl .
&rowTpl
O nome do bloco que contém o modelo para os elementos da linha do menu.
Espaços reservados disponíveis:
- wf.classes - saída da classe (incluindo o atributo class="")
- wf.classnames - saída das classes correspondentes (sem class="")
- wf.link - valor do atributo href="" para o link do menu
- wf.title - nome do texto do título do link do campo especificado no parâmetro &titleOfLinks
- wf.linktext - texto do link ativo especificado no campo passado no parâmetro &textOfLinks
- wf.wrapper - exibe conteúdo interno, como submenu
- wf.id – exibe o ID exclusivo do atributo. Você precisa especificar o parâmetro &rowIdPrefix para que esse espaço reservado receba um valor. O valor é o prefixo + docId.
- wf.attributes - exibe o link de atributos para o elemento atual
- wf.docid - identificador do documento do elemento atual
- wf.description - descrição do elemento atual
- wf.level - nível de aninhamento atual
Exemplo de uso:
Outra opção:
Exemplos
Primeiro nível
[[!Localizador de caminho? &startId=`0` &nível=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`ativo`
&rowClass=`eNav_li`]]
Código do pedaço OuterTpl
[[+wf.wrapper]]
Código do bloco RowTpl
[[+wf.wrapper]]
Segundo nível (neste exemplo, os itens de menu e submenu estavam visualmente no mesmo nível
[[!Localizador de caminho? &startId=`0` &nível=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`ativo`]]
Código de bloco outerTplFooterMenu
[[+wf.wrapper]]
código do bloco rowTplFooterMenu
[[+wf.título]]
[[+wf.wrapper]]
Código do bloco innerTplFooterMenu
[[+wf.wrapper]]
código do pedaço innerRowTplFooterMenu
[[+wf.título]]
Saudações, queridos leitores. Na última lição enchemos o site com algum conteúdo (), agora é a hora exibir tudo no menu para que os usuários possam navegar até eles.
Criar dinâmico menu no MODX usaremos um trecho PdoMenu do pacote ferramentas pdo. Antes de começar, leia a documentação principal.
Documentação do pdoMenu
Opções
Opções de modelo
Opções de classe CSS
Exemplos oficiais
Você pode ler a documentação oficial aqui. Agora vamos dar uma olhada nas chamadas de menu mais típicas.
Chamar PdoMenu
Opção 1. No lugar deste menu estático chame o trecho pdoMenu, para isso na árvore de recursos, na aba “ Elementos”Na seção de snippets, expanda o tópico ferramentas pdo, depois clique em pdoMenu botão esquerdo do mouse (não solte o botão) e arraste este trecho até o local onde deseja abrir o menu, a seguir na janela que se abre preencha os parâmetros necessários e clique em “ Salvar«.
opção 2. Apenas escrevemos a chamada manualmente.
Exemplos típicos
Menu normal de um nível
Por exemplo, temos o menu mais comum, com a seguinte marcação html.
O resultado é o seguinte código para chamar o menu:
- &parents=`0` - lista de pais (no meu caso não limito a seleção, pois de qualquer maneira exibirei apenas algumas páginas);
- &level=`1` — nível de aninhamento (neste caso não há nenhum);
- &resources=`2,3,4,5` — lista de recursos que precisam ser exibidos no menu;
- &firstClass=`0` — classe para o primeiro item de menu (não qual);
- &lastClass=`0` — classe do último item do menu (não qual);
- &outerClass=`top-menu` — classe wrapper de menu (substituída em ul);
- &hereClass=`current-menu-item` — classe para o item de menu ativo (substituído em li);
- &rowClass=`menu-item` - classe de uma linha de menu (substituída em li).
Menu de inicialização personalizado de dois níveis
O código HTML estático é assim:
Seu código de saída será assim:
Também na próxima lição darei mais algumas saídas de menus suspensos baseados em bootstrap (e isso é para aqueles que não entenderam a essência. Bem, então faremos isso.
À primeira vista tudo parece complicado, mas não é, leia a documentação com mais detalhes, tire dúvidas nos comentários, com certeza vou ajudar.
Para criar um menu dinâmico usaremos um snippet pronto Localizador de caminho. Um trecho, como você provavelmente se lembra das lições anteriores, é um trecho de código PHP que podemos incluir em nosso modelo. A diferença dos pedaços está apenas no código e no método de chamada. Se chamarmos um pedaço usando chaves duplas, os snippets serão chamados usando o seguinte [!Snippet_name!]- chamada não armazenada em cache ou algo semelhante [[Nome do trecho]]- chamada em cache. Cada código de snippet deve começar com e fim ?> . Além disso, cada snippet pode receber valores de parâmetros especiais que serão processados. O MODx já possui vários trechos prontos que usaremos futuramente.
Trecho Localizador de caminho serve para organizar listas de links para MODx. O menu do nosso site é uma lista desses links. Vamos primeiro encontrar um trecho de código responsável por exibir nosso menu. O menu está no pedaço CABEÇALHO, aqui está:
Vamos cortar este código e escrever:
((CARDÁPIO))
E vamos colar o código em um novo pedaço CARDÁPIO, na descrição do pedaço escreveremos cardápio do site. Agora vamos estudar esse código.
O menu do nosso site é uma lista simples e sem numeração localizada em um contêiner com id="templatemo_menu". Vamos cortar esta lista do contêiner e inserir uma chamada para nosso snippet:
&startId=`0`é um parâmetro com valor 0, que indica ao snippet o ID da pasta onde estão localizados os documentos processados. Todos os nossos documentos que iremos exibir no menu estão localizados na pasta raiz, o ID da pasta raiz é zero. Vamos ver o que temos.
Nosso menu funciona, apenas o item ativo não está mais destacado em branco:
Para entender por que isso aconteceu, precisamos observar o código-fonte da página. No Mozilla Firefox isso é feito desta forma: Ver >> Código-fonte da página ou simplesmente pressionando o atalho do teclado Ctrl+U. Encontre o código do nosso menu:
Observe que no código-fonte o item ativo tinha classe = "atual", e nosso snippet é atribuído automaticamente ao item ativo classe="ativo". Notamos também que no código fonte a classe foi aplicada à tag
, e agora para a tag
Encontre o arquivo na pasta C:/xampp/htdocs/site/www/assets/templates/ modelomo_style.css e abra-o usando o Notepad++. Estamos procurando uma descrição da classe atual neste arquivo, ela está localizada em 198 linha:
#templatemo_menu li .atual(
preenchimento à esquerda: 40px;
cor: #ffffff;
}
substituir a classe atual sobre ativo, não esquecendo de reatribuí-lo à tag :
#templatemo_menu li.active a (
preenchimento à esquerda: 40px;
cor: #ffffff;
}
Salve o arquivo. Vamos ver o que aconteceu.
Nosso menu funcionou exatamente como os designers pretendiam. Agora podemos navegar pelas páginas do nosso site através do nosso menu principal. Ao adicionar outros documentos à pasta raiz, eles aparecerão automaticamente em nosso menu. Para evitar que documentos indesejados sejam exibidos no menu, você deve desmarcá-los Mostrar no cardápio. Você pode excluir à força um item indesejado usando o parâmetro &excludeDocs=`lista de ids de documentos excluídos, separados por vírgulas`.
Para evitar que o menu exiba documentos filhos que criaremos nas próximas lições, vamos adicionar um parâmetro à chamada do snippet nível, que determina a quantidade de níveis no menu, por padrão todos os níveis serão exibidos, vamos limitar a apenas um nível:
-
17 de abril de 2015Análise do smartphone Samsung Galaxy A3: elegante “mid-range” -
17 de abril de 2015Pandora Recovery – um programa para recuperar dados excluídos
