Меню Materialise не работает на WordPress

wp_nav_menu генерирует список вместе со своим ul. Однако вы можете указать классы ul и идентификатор в своих меню отдельно, например, так:

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      <a href="<?php bloginfo('url'); ?>" class="brand-logo"><?php bloginfo('title'); ?></a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'right hide-on-med-and-down'
        ));
      ?>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'side-nav',
          'menu_id' => 'mobile_demo'
        ));
      ?>
    </div>
  </nav>
</div>

Здесь вы можете заметить, что menu_class и menu_id соответствуют классу и идентификатору списка соответственно. Вам даже не нужно использовать теги ul.

Я реализовывал одно и то же меню и решил следующим образом: я установил items_wrap с <ul id="slide-out">, чтобы воссоздать ту же структуру материализации меню, и, похоже, это работает:

  <div class="nav-wrapper">
      <a href="<?php bloginfo('url'); ?>" class="logo"><?php bloginfo('title'); ?></a>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'right hide-on-med-and-down'
        ));
      ?>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'side-nav',
          'menu_id' => 'mobilemenu',
          'items_wrap'      => '<ul id="slide-out" class="%2$s">%3$s</ul>'  
        ));
      ?>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>

Я модифицировал уже существующий обходчик Bootstrap и добавил некоторые настройки, чтобы заставить его работать с MaterialiseCSS. Кажется, работает нормально, но я уверен, что есть вещи, которые можно улучшить в коде, так как я не большой пользователь PHP :)

https://github.com/eamonnmag/wp-bootstrap-navwalker

Простой способ сделать это с помощью меню Wordpress, работающего с Materialize CSS (подменю), — добавить эту строку в ваш скрипт:

$( document ).ready(function(){

// Add class to ul parent
$('#primary-menu').addClass('hide-on-med-and-down');

// Add to sub menus unique ID
$( ".sub-menu" ).each(function(index) {
    $(this).addClass( "dropdown-content" );
    $(this).attr('id', 'dropdown' + index);
});

// Get li parents, identify which have sub-menus
$( "ul#primary-menu li.menu-item-has-children > a" ).each(function(index) {
    $(this).addClass('dropdown-button');
    $(this).attr('data-activates', 'dropdown' + index);
});

// Configure dropdown
$(".dropdown-button").dropdown({
    hover: false
});
});

Просто посмотрите на структуру Materialize и воспроизведите ее в меню Wordpress;)

этот код работает для меня: https://github.com/Kail0/wp-materialize-navwalker в header.php

    <nav role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="#" class="brand-logo">Logo</a>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <?php
                    wp_nav_menu( array(
                        'menu' => 'Primary',
                        'theme_location'=>'Primary',
                        'container' => '', 
                        'menu_class' => 'right hide-on-med-and-down',
                        'walker' => new wp_materialize_navwalker()
                    ));
        ?>
    </div>
</nav>

и этот код для ответа

нижний колонтитул.php

    $(function() {

    elemSwap = function() {
        if ($(window).width() < 992) {

            $('.nav-wrapper.container > ul').attr("id", "nav-mobile");
            $('.nav-wrapper.container > ul').removeClass('right hide-on-med-and-down').addClass('side-nav');

            $('.drag-target').on('click', function() {
                $('.side-nav').removeAttr('style');
            });
            $('nav .button-collapse').click(function(event) {
                $('.side-nav').css({
                    "transform": "translateX(0%)"
                });
            });
            $('#menu-menu .dropdown-button.main-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: true, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                belowOrigin: true, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
            // nested dropdown initialization
            $('#menu-menu .dropdown-button.sub-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: false, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                gutter: ($('.dropdown-content').width() * 3) / 3.05 + 3, // Spacing from edge
                belowOrigin: false, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });

        } else {
            $('.nav-wrapper.container > ul').attr("id", "menu-menu");
            $('.nav-wrapper.container > ul').removeClass('side-nav').addClass('right hide-on-med-and-down');
            // main dropdown initialization
            $('#menu-menu .dropdown-button.main-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: true, // Does not change width of dropdown to that of the activator
                hover: true, // Activate on hover
                belowOrigin: true, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
            // nested dropdown initialization
            $('#menu-menu .dropdown-button.sub-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: false, // Does not change width of dropdown to that of the activator
                hover: true, // Activate on hover
                gutter: ($('.dropdown-content').width() * 3) / 3.05 + 3, // Spacing from edge
                belowOrigin: false, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
        }
    }

    elemSwap();

    $(window).resize(elemSwap);
});

Вы должны сделать, как показано ниже:

'menu_class'     => 'menu right hide-on-med-and-down'

Первым словом должно быть «меню».