menu acordeão jQuery

Então, eu comecei a desenvolver um tema com _s (underscolors) como base. Por três dias seguidos (quase) tentei fazer um tipo de acordeão como esse:

Exemplo: https://codyhouse.co/demo/multi-level-accordion-menu/animated.html

Eu sei que tenho que fazer uso do jQuery, mas nunca usei o jQuery antes e não sei como “integrar” um script jQuery no WordPress.

Eu sei que tenho que modelar o menu em conformidade, mas não tenho certeza de como fazer isso porque parece que meu código php para o menu * gera automaticamente classs

* 'primary', 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'menu_id' => 'primary-menu' ) ); ?> 'primary', 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'menu_id' => 'primary-menu' ) ); ?>

Então, basicamente, o que estou dizendo é que eu quero o menu no exemplo, mas não tenho ideia de como fazê-lo no wordpress. Eu não espero que alguém me entregue o código, mas para ser sincero, eu apreciaria qualquer ajuda aqui. Estou muito sem esperança e eu realmente tentei o meu melhor!

Se alguém puder me ajudar, eu seria muito obrigado!

É o que eu tenho até agora.

header.php

  

HTML renderizado (entre

)

  

style.css (Somente a navegação de peça)

 /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; width: 100%; } .main-navigation li { float: left; position: relative; width: inherit; } .main-navigation a { display: block; text-decoration: none; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 1.5em; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a, .main-navigation li.focus > a { } .main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a { } .main-navigation ul ul a:hover, .main-navigation ul ul a.focus { } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a { } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } .menu-toggle { display: none; } .main-navigation ul { display: block; } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } 

Solutions Collecting From Web of "menu acordeão jQuery"

Adicione o argumento menu_class com o valor do cd-accordion-menu ao seu código, para que pareça com isto:

  

Você pode ver mais opções para alterar aqui: https://developer.wordpress.org/reference/functions/wp_nav_menu/

Sobre aprender jQuery, é realmente muito fácil. Basta ir para http://api.jquery.com/ e ler as páginas do menu à esquerda possível. Definitivamente ajudará.

Para usar o jQuery com o WordPress, crie-o de preferência para evitar conflitos devido à adição duplicada no código-fonte. (Leia mais aqui: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ )