Suporte » Desenvolvendo com WordPress » wp_nav_menu – Como gerar uma class (hidden) automaticamente para cada submenu

  • Resolvido rflfn

    (@rflfn)


    Olá a todos, estou criando um tema com suporte a menu personalizado e preciso de ajuda com a seguinte situação:

    O codigo abaixo está inserido na index do meu tema e está puxando o menu personalizado que configurei no painel do WP (está parte está funcionando normalmente):

    <div id="meu_menu">
    <?php wp_nav_menu( array( 'theme_location' => 'meu_menu' ) ); ?>
    </div>

    O css para esse menu acima está assim:

    #meu_menu ul li .children{
    	display: none;
    }
    #menu_menu ul li:hover .children{
    	display: block;
    }

    Este código CSS tanbém funciona perfeitamente, porém se eu adicionar outros submenus, como essa imagem quem tem 3 niveis de menu ou mais:
    http://www.acousticwebdesign.net/wp-content/uploads/2010/11/WordpressMenuItemPosition2.png

    eu tenho que criar mais um nível de CSS indicando que o nivel 3 tem que ficar oculto e aparecer apenas quando passar o mouse no nível 2, e assim por diante, precisando gerar varios niveis de CSS indicando que o nível 4, 5, 6 etc… tem que ficar oculto e aparecer apenas quando passar o mouse no nível anterior.

    O que eu queria saber, é se há algum código que eu posso utilizar no “functions.php” ou diratemente no template mesmo, para gerar o codigo CSS “block” e “hidden” automaticamente para os outros níveis, a questão é que eu não sei quantos níveis de submenus o usuário vai utilizar, sendo assim seria inviável criar por exemplo 20 classes de CSS indicando a propriedade block e hidden para cada submenu que deve ser ativado quando passar o mouse no menu anterior e mostrar o próximo nível de submenu.

    Obrigado, toda ajuda é bem vinda.

Visualizando 8 respostas - 1 até 8 (de um total de 8)
  • manda um link de exemplo ou joga o CSS inteiro pra gente analisar. Por cadeia, vc nao precisaria de mais de um CSS. O seu submenu eh horizontal ou vertical?

    Criador do tópico rflfn

    (@rflfn)

    É um menu horizontal, veja essa imagem:
    http://imageshack.com/a/img33/6692/4xrw.png

    Pode se perceber que ele adiciona automaticamente os números depois da classe ou ID da div, exemplo (102, 103, 104…)

    Esse menu eu fiz ele através da opção “Aparência > Menus”, e adicionei o suporte pra ele no meu tema, até ai está funcionando normalmente, porém como você pode ver nessa imagem abaixo que referência o mesmo menu da imagem acima:
    http://imageshack.com/a/img839/7460/os0c.png

    O usuário pode configurar quantos submenus ele quiser, o problema é que eu não sei quantos submenus o usuário pode querer usar no tema, então eu tenho que fazer um código que faça isso automáticamente, que verifique se existe um novo submenu e adicione um css como os outros submenus anteriores, adicionando a classe “display:hidden” ou “display:none”, e ao passar o mouse chame a classe “display:block” para mostrar o submenu.

    Por exemplo se eu tenho esse CSS:

    /* Classe para ocultar o primeiro submenu */
    #menu submenu_1 ul li{
    	display:none;
    }
    #menu submenu_1 ul li:hover{
    	display:none;
    }
    
    /* Classe para ocultar o segundo submenu */
    #menu submenu_1 ul li .submenu_2{
    	display:none;
    }
    #menu submenu_1 ul li .submenu_2:hover{
    	display:none;
    }
    
    /* Classe para ocultar o terceiro submenu */
    #menu submenu_1 ul li .submenu_2 ul li{
    	display:none;
    }
    #menu submenu_1 ul li .submenu_2:hover ul li{
    	display:none;
    }

    Porém eu não sei quantos submenus o usuário vai querer usar, então não acho certo por exemplo ter que deduzir que ele vai usar 10 subníveis de menu e fazer 10 códigos desse, ou então fazer 10 códigos CSS para os submenus e limitar o usuário a esse número, sendo que se ele usar por exemplo 11, o submenu de número 11 vai ficar desconfigurado.

    Então o que eu queria fazer, é um código que consiga gerar esse código CSS automáticamente, verificando se há algum outro submenu e adiciona as classes pré-definida no primeiro CSS que for denifido para o menu. Como você pode ver que eu marquei na primeira imagem (102, 103, 104), da pra ver que ele segue algum padrão, então eu poderia aproveitar esse padrão para usar um código PHP no functions pra fazer isso, mas não sei como…

    Não sei se você conseguiu entender, caso não tenha entendido ou tento explicar melhor.

    Criador do tópico rflfn

    (@rflfn)

    Corrigindo o CSS anterior, coloquei tudo “none”…

    /* Classe para ocultar o primeiro submenu */
    #menu submenu_1 ul li{
    	display:none;
    }
    #menu submenu_1 ul li:hover{
    	display:BLOCK;
    }
    
    /* Classe para ocultar o segundo submenu */
    #menu submenu_1 ul li .submenu_2{
    	display:none;
    }
    #menu submenu_1 ul li .submenu_2:hover{
    	display:BLOCK;
    }
    
    /* Classe para ocultar o terceiro submenu */
    #menu submenu_1 ul li .submenu_2 ul li{
    	display:none;
    }
    #menu submenu_1 ul li .submenu_2:hover ul li{
    	display:BLOCK;
    }

    Em resumo, preciso gerar esse código de ocultar e mostra os submenus automaticamente sem precisar criar um monte de CSS sem saber quantos submenus o usuário vai utilizar.

    A melhor maneira é você programar “no braço” o segundo e terceiro nível hierárquico.

    Defina o máximo de 3 níveis para submenu. Sites com mais de 3 níveis acabam confundindo o usuário. Não tem como bloquear via Admin, mas você pode deixar um diplay:none via CSS para do quarto nível em diante.

    Caso o seu cliente exija mais de 3 níveis, programe o 4o/5o no braço.

    Este menu dropdown já pronto pode facilitar pra você também: http://css3menu.com/

    Tutoriais para te auxiliar: http://www.siteparaempresas.com.br/blog/?p=1725

    Este link em inglês tem 5 níveis de submenu: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

    Criador do tópico rflfn

    (@rflfn)

    Cara esses links que você me mandou vão ser de grande ajuda, muito obrigado mesmo, tinha muitos menus que eu tive que fazer, e que ai já tem muitos deles prontos, muito obrigado.

    Minha idéia (voltado ao modo ‘automático’) seria algo como registrar a sidebar, como por exemplo esse código:

    if(function_exists('register_sidebar'))
        register_sidebar(array(
            'before_widget' => '<div class="widgets">',
            'after_widget' => '</div>',
            'before_title' => '<h2>',
            'after_title' => '</h2>',
        ));

    No caso, ele registra um h2 antes do texto, e depois do texto ele fecha o h2, acredito que uma adaptação desse código daria pra fazer o que eu queria, por exemplo adicionar um class antes de cada menu e fechar ela depois do menu, pelo menos assim (mesmo que eu faça na mão) quando o usuário criar menus diferentes (para páginas com categorios e tags por exemplo), não há riscos da div mudar de nome (já que o wordpress tem muitas funções e divs com nomes diferentes para outros menus) e meu CSS iria se tornar inválido…

    Se conseguir me dar uma força com essa parte ficaria muito grato, de qualquer forma muito obrigado pelos links, eles vão me ajudar muito.

    Você não precisa de nomes e nem de classes, utilize a hierarquia pelo próprio CSS, por exemplo: #meu_menu>ul>li>.children e depois: #meu_menu>ul>li>ul>li.children e por ai vai…

    resolve pra ti?

    Criador do tópico rflfn

    (@rflfn)

    Depois que eu postei que percebi que podia usar o li e ul (já que aparecem em todos os submenus) ao invés de “tentar” colocar uma classe entre eles rsrsrs…

    De qualquer forma eu também achei como fazer isso, nesse vídeo o cara mostra como adicionar a classe antes e depois:
    http://www.youtube.com/watch?v=PTuiSvvxoC8

    E neste vídeo tem um passo a passo bem explicado como criar um menu de 5 níveis, e funciona melhor do que pensei:
    http://www.youtube.com/watch?v=7YaJnLNNeqE

    Também dei uma “fuçada” no tema Twenty Thirteen e ele tem esse suporte ao menu personalizado (tinha olhado antes mas não tinha conseguido fazer funcionar…), dei uma olhada também no CSS dele e ele customiza o menu que funciona perfeitamente, o que é até bom porque sendo um tema oficial não há riscos desse código ser uma “gambiarras” rsrsrs…

    Está ai a solução:

    Aqui o código que chama o menu personalizado dentro da pagina que vai ficar o menu (no meu caso na index):

    <div class="menu...">
    <?php wp_nav_menu( array( 'theme_location' => 'ID_DO_MENU', 'menu_class' => 'nav-menu' ) ); ?>
    </div>

    Adicionar esse código no functions:

    function register_my_menu() {
      register_nav_menu('ID_DO_MENU',__( 'Descrição do menu' ));
    }
    add_action( 'init', 'register_my_menu' );

    E o CSS que tanto apanhei conseguir gerar automaticamente os submenus (obs: está com o estilo padrão do TwentyThirteen):

    ul.nav-menu,
    div.nav-menu > ul {
    	margin: 0;
    	padding: 0 40px 0 0;
    }
    
    .nav-menu li {
    	display: inline-block;
    	position: relative;
    }
    
    .nav-menu li a {
    	color: #141412;
    	display: block;
    	font-size: 15px;
    	line-height: 1;
    	padding: 15px 20px;
    	text-decoration: none;
    }
    
    .nav-menu li:hover > a,
    .nav-menu li a:hover {
    	background-color: #220e10;
    	color: #fff;
    }
    
    .nav-menu .sub-menu,
    .nav-menu .children {
    	background-color: #220e10;
    	border: 2px solid #f7f5e7;
    	border-top: 0;
    	display: none;
    	padding: 0;
    	position: absolute;
    	left: -2px;
    	z-index: 99999;
    }
    
    .nav-menu .sub-menu ul,
    .nav-menu .children ul {
    	border-left: 0;
    	left: 100%;
    	top: 0;
    }
    
    ul.nav-menu ul a,
    .nav-menu ul ul a {
    	color: #fff;
    	margin: 0;
    	width: 200px;
    }
    
    ul.nav-menu ul a:hover,
    .nav-menu ul ul a:hover {
    	background-color: #db572f;
    }
    
    ul.nav-menu li:hover > ul,
    .nav-menu ul li:hover > ul {
    	display: block;
    }
    
    .nav-menu .current_page_item > a,
    .nav-menu .current_page_ancestor > a,
    .nav-menu .current-menu-item > a,
    .nav-menu .current-menu-ancestor > a {
    	color: #bc360a;
    	font-style: italic;
    }
    
    .menu-toggle {
    	display: none;
    }

    Dessa forma tudo funciona como deveria \o/
    Caso tenha outros submenus o CSS é gerado automaticamente pra cada um deles, não precisa limitar a quantidade de menus que o usuário pode utilizar.

    Muito obrigado pela sua ajuda Leo!

    Anytime!

Visualizando 8 respostas - 1 até 8 (de um total de 8)
  • O tópico ‘wp_nav_menu – Como gerar uma class (hidden) automaticamente para cada submenu’ está fechado para novas respostas.