物化菜单不适用于 WordPress

Question

我已经通过 Materialize CSS Framework 制作了一个 WordPress 主题，但我遇到了导航栏的问题。 这是我现在导航栏的图像：http://postimg.org/image/b27td128d/ 如您所见，DropDown 链接有问题，默认打开，在移动屏幕中也是如此。

这里是导航栏代码：

<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>
                <ul class="right hide-on-med-and-down">
                  <?php wp_nav_menu(); ?>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <?php wp_nav_menu(); ?>
                  </ul>
              </div>
        </nav>
</div>

我该如何解决这个问题？

Answer 1

wp_nav_menu 与其ul 一起生成一个列表。但是，您可以像这样在菜单中单独提及 ul 类和 id，

<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 分别对应于列表的类和id。你甚至不需要使用ul 标签。

Answer 2

我正在实现相同的菜单并以这种方式解决：我将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>

Answer 3

我修改了已经存在的 Bootstrap walker，并添加了一些自定义项以使其与 MaterialiseCSS 一起使用。似乎工作正常，但我确信代码中有一些可以改进的地方，因为我不是 PHP 大用户:)

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

Answer 4

使用 Materialise CSS（子菜单）的 Wordpress 菜单的一种简单方法是在脚本中添加以下行：

$( 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 菜单中；）

Answer 5

此代码对我有用：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);
});

Answer 6

你应该这样做：

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

第一个单词必须是“菜单”。